Is It Possible To Get A Div's Height To Be 100% Of An Available Area?

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

Solution 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;
}

Solution 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>