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

Question

Hi All,

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

Answer 2

I think I've got a correct way to do it without Javascript:

<div style="height:500px; background:pink; overflow: hidden">
   <div style="background: yellow">stuff</div>
   <div style="height: 100%; background: red;">This div needs to take up the rest of the space</div>
</div>

The key being "overflow:hidden" on the main div, as setting the height of the 2nd div to 100% makes it 500 pixels tall.