Height 100% in Side-Bar

Question

Good evening friends,

I am setting up a project with a focus on learning, my project consists basically of an Administrative Panel style layout, where there is a side menu on the left, and the content on the right. I’m using to shape it HTML, CSS (Bootstrap, although I’ve done so far all by hand) and Jquery.

What brings me here today is that I’m not being able to create a dynamic height for them, I used Maujor’s tutorial for HTML and Body 100% height before but it didn’t work, looking at the questions right here I tried to put Position Absolute and Position relative to the parent and child blocks, and it almost worked, it works when I put the "overflow:auto" in the CSS class of the content block (contend) but keeps appearing 2 Scroll on the page and when I try to remove using Hidden or None, I lose the height of 100%.

To summarize my goal is this: I want the Sidebar Height to increase dynamically as the contents of the next container increase as well. As my main goal is learning, I am open and would be grateful for all criticism or better way to make my code.

Code in the Jsfiddle: https://jsfiddle.net/gzcr85ha/2/
Note: First time using Jsfiddle I didn’t see where to attach the bootstrap and the menu was awful without the bootstrap part I used, forgive me for that.

Big hug and thanks in advance!

Answer 1

If you want the height to accompany the content you must change height: 100% for min-height: 100% thus:

.main {
  min-height: 100%;
  width: 100%;
  position: relative;
  display: block;
}

.side-bar {
  min-width: 285px;
  min-height: 100%;
  padding: 0px;
  margin: 0px;
  position: absolute;
  overflow: none;
  float: left;
  background: #3d3d3d;
  font-family: "Open Sans";
  font-style: red;
}

If you want both columns to be of the same height it will be necessary to use techniques like this:

• http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

Another approach would be the use of vh instead of %.

What’s the difference between them?

vh

vh = View Height (there is also the property vw = view width) which refers to the height of view port, that is, the height of the browser. Regardless of your Parent (or parent element) to occupy the specified height or not. Examples:

• height: 100vh = 100% browser height;
• height: 60vh = 60% browser height;

When defining vh you do not create any bond with the div father, ie if its div father possess a height of 150px and its element possess 100vh, it will have the size of the browser, ignoring the 150px of its parent element.

Note: When defining vh you will be automatically picking up the height of the browser and applying to the element from its point of origin, ie you will not always have the element "covering" the browser screen.

Take this example: https://jsfiddle.net/eta18hpw/

---

%

Unlike the vh the % will occupy a value in % based on their Parent (parent element), why you need to set a height of 100% at the html and body when you want a div to occupy full screen height.

See the same example above using %: https://jsfiddle.net/eta18hpw/1/

If you give a inspect you will notice that it has a height of 130px (150px of the parent element minus 10px on each side - because the parent element has a padding).

That is, it has - in theory - the same height as its parent element, that is, 100%.

---

They are different approaches, with different purposes and are used in different ways. I particularly use the vh when I need to achieve a goal similar to yours, because I don’t have to worry about all the parent elements being 100% tall, I just worry about that particular element. The layout is more 'organized' and clean.

See an example applying your scenario: https://jsfiddle.net/1m81o0qk/

Note that if you resize the screen to make it smaller, only the element aside will get the scroll (set with overflow-y) to hold the menu contained in it.

I hope this can help you.