The div is disabled at the bottom of the viewport when it should stretch to the height of the content inside it

Question

Take a look at this jsfiddle example: http://jsfiddle.net/2YbpZ/5/

Here I stretch div content to 100% height and it works fine. However, when I have very high content inside the content div, this happens: http://jsfiddle.net/2YbpZ/2/

As you can see, div content turned off at the bottom of the viewport when I want it to continue with the content inside it.

I know why this happens because its parent element (html and body) is set to 100% height and it cannot go beyond this. To fix this, I add a wrapper div and now it works: http://jsfiddle.net/2YbpZ/4/

But now another problem arises when the content inside the div content not long enough to stretch outside the viewport, div content does not stretch to the height of the page, for example: http://jsfiddle.net/2YbpZ/4/

So the question is, how can I adapt this to make the content div always at least 100% high?

Answer 1

Do not use a wrapper, but use min-height:100% instead of height:100% in your #content div.

Note. IE6 does not support minimum height.