9

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

Hcabnettek
  • 12,678
  • 38
  • 124
  • 190
  • 3
    Same as http://stackoverflow.com/questions/1818467/how-to-apply-100-height-to-div ? – Upperstage Jan 07 '10 at 20:46
  • Forget about Java Script solutions or hacks with table layout[enter link description here][1] [1]: http://stackoverflow.com/a/26558049/869661 – Kryszal Aug 25 '15 at 20:35

2 Answers2

9

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));
});
Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
3

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.

Erik
  • 20,526
  • 8
  • 45
  • 76
  • 4
    but if the filler (red) div's content is too large (ie higher than 500px - height of red div) it will be cut off. This might be ugly, depending on the contents of the red div. – AUSteve Jan 10 '10 at 11:11