Height 100% in Side-Bar

If you want the height to accompany the content you should change height: 100% to min-height: 100% like this:

.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 you will need to use techniques like this:

• link

Another approach would be to use vh instead of % .

What's the difference between them?

vh

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

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

When you set vh you do not create a link with div parent, that is, if your div parent has a height of 150px and your element has 100vh , it will be the size of browser, ignoring the 150px of its parent element.

Note: When you set vh you are automatically picking up the height of the browser and applying it to the element from the point of origin, ie you will not always have the element "covering" the browser screen. p>

See this example: link

%

Unlike vh , % will occupy a value in % based on your parent, so you need to set a height of 100% to html and body when you want a div to occupy full screen height.

See the same example above using % : link

If you give inspect you will notice that it has a height of 130px (150px of the parent element, minus 10px on each side - since the parent element has 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 that are used in different ways. I particularly use vh when I need to achieve a goal similar to yours, since I do not have to worry about all the parent elements being 100% tall, I just worry about that particular element. The layout gets more 'organized' and clean.

See an example by applying your scenario: link

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

I hope this can help you.