CSS: make container fit screen

Question

I am working on a website which has two containers: sidebar and the main content. The problem is that when minimizing the window (only) the left sidebar fits the size of the current size of the screen and when scrolling down the sidebar disappears.. This only happens when the content container (on the right) doesn't fill the screen..

You can try and minimize this page you'll see that the left side bar disappears when scrolling down when window is minimized.

You can try a good page with more content, you'll see that all is fine here..

I tried height="100%" and width="100%"

Answer 1

OK Figured it out

I had to add:

min-height: 100%;

to the body

and use

bottom: 0;

on the sidebar

Thanks for your help :)

Answer 2

The main issue is that the wrapper and sidebar elements in your body are absolutely positioned - therefore the body does not know how to expand to the size of the content of the page itself, as absolutely positioned elements are taken out of the flow of the document. In this case, you have taken all the content of the page out of the document flow.

Therefore, setting a height, or min-height, to the body element will not work, as it will only take on the height of the viewport and nothing else. The children container, being absolutely positioned, will then also take on the height of the viewport.

Scrolling is still possible on the merit that content is overflowing from either one of the absolutely positioned children.

You can try setting height: auto on the sidebar element. Alternatively, you should float your wrapper and sidebar (and take out absolute positioning) - that will at least place the content back into the document flow, allowing the browser to compute the actual 100% height :)

Absolutely positioning is a little bit of a tricky issue, I have to admit.