Making the height of a div 100% of the view-port height or the entire height of the page

Question

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

You can see that both the sidebar and content elements stretch to the bottom of the view-port. This is what I want.

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

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

Similarly, if the content is no longer long enough to not fit the view-port, the sidebar and content divs act as if they have no height assigned at all: http://jsfiddle.net/xsHHv/

So my question is how can I have the sidebar and content divs be the height of the view-port if the content doesn't stretch off the page, or have them the height of the content if it does?

Answer 1

The trick is to give your elements a huge padding-bottom, with a 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's your fiddle: http://jsfiddle.net/Lr6k9/4/