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

Question

I have a div with two nested divs. The first child has a different height depending on its contents, I want the height of the 2nd divisor to be what is left of 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?

Thank you ~ ck in San Diego

Answer 1

This requires some javascript. I see that you are using jQuery, so this should work:

Give an identifier 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 have the correct way to do this 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 overflow: hidden key in the main div, since setting the height of the second div to 100% is 500 pixels.