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

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

• javascript
• jquery
• html
• css

• 3 Same as stackoverflow./questions/1818467/… ? – Upperstage Commented Jan 7, 2010 at 20:46
• Forget about Java Script solutions or hacks with table layout[enter link description here][1] [1]: stackoverflow./a/26558049/869661 – Kryszal Commented Aug 25, 2015 at 20:35

2 Answers 2

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

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.