How can I make a DIV take up the rest of the height of a container div?
css, html, javascript, jquery
Solution
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));
});
Problem
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