How can I make a DIV take up the rest of the height of a container div?

Question

I have a div with two nested divs. The first child has varying height depending on its content, I want the the 2nd divs height to be whatever is left over from the parent.

<div style="height:500px;">
   <div>Some Content Here</div>
   <div>This div needs to take up the rest of the space of its parent</div>
</div>

How can I do this?

Thanks, ~ck in San Diego

Answer 1

It requires some javascript. I see you're using jQuery, so this should work:

Give some id to your parent div:

<div style="height:500px;" id="parent">
    <div>Some Content Here</div>
    <div>This div needs to take up the rest of the space of its parent</div>
</div>

Then in jQuery:

$('div#parent div:last').each(function() {
    var p = $(this).parent();
    $(this).height(p.height() - ($(this).offset().top - p.offset().top));
});