Create div height at 100% of viewport height or entire page height

Question

If you look at this jsfiddle example: http://jsfiddle.net/2YbpZ/

You can see that the sidebar and content elements sidebar stretched at the bottom of the view port. This is what I want.

However, when providing some content that stretches the page and requires the user to scroll: http://jsfiddle.net/p6qGg/

The sidebar and content delimiters sidebar clipped to the bottom of the viewport. I know why this happens because 100% refers to the entire height of the parent element, which in this case is a port view, but when I change the layout to have a wrapper div surrounding the two elements, and has min-height: 100% this happens: http://jsfiddle.net/Lr6k9/

Similarly, if the content is no longer long enough to not fit the viewport, the sidebar div and content act as if they have no height at all: <a3>

So my question is how can the sidebar div and content be the height of the view port if the content does not stretch the page or does not have the height of the content if it

Answer 1

The trick is to give your elements a huge padding-bottom with the corresponding negative margin-bottom :

 html, body { height: 100%; } #wrapper { min-height: 100%; overflow: hidden; } #sidebar, #content { float: left; padding-bottom: 999em; margin-bottom: -999em; } 

Here is your fiddle: http://jsfiddle.net/Lr6k9/4/

Answer 2

I suppose I answered this other previous question on this question , but updated your script using the approach:

http://jsfiddle.net/6Yd6y/2/

 // relevant code :-P