Is it possible to get a div's height to be 100% of an available area?

Question

I have a design that has a left side bar and a main content well on the right. On most pages on the site, the left sidebar is taller than the content well, but for a few pages, the content well is very tall and the sidebar is left floating with no bottom.

I have created a piss poor example of what I'm talking about here:

http://www.pmind.com/staging/pisspoor.html

I remember years ago the answer was to just assign a background image that would fake it, i.e. in my example just make an image that had a green bar down the left side of it and make that the background to the main red div. And I know this is a common want for websites to have areas that span 100% of the browser window, so you can make HTML and BODY be 100%, but in this case, the area is capped by the header and footer so the browser's dimensions aren't a factor, I just want the green div to be the height of it's parent red div. Is this still a pipe dream with CSS2.1 and lower?

Answer 1

You could use Javascript to do the job or you could set a min-height in CSS on the content:

#content {
min-height:500px;
}

Answer 2

Here is a good example of div positioning. Here is a working example http://jsbin.com/izosi3

<div id="header" style="position:absolute; top:0px; left:0px; height:50px; right:0px;">
</div>
<div id="leftnav" style="position:absolute; top:50px; left:0px; bottom:50px; width:150px;">
</div>
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;">
</div>
<div id="footer" style="position:absolute; height:50px; left:0px; bottom:0px; right:0px;">
</div>