Как сделать так, чтобы DIV занимал остальную часть высоты контейнера?

Question

У меня есть div с двумя вложенными div. Первый дочерний элемент имеет различную высоту в зависимости от его содержимого, я хочу, чтобы высота 2-го делителя была той, что осталась от родителя.

<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>

Как я могу это сделать?

Спасибо, ~ ck в Сан-Диего

Answer 1

Требуется некоторый JavaScript. Я вижу, вы используете JQuery, так что это должно работать:

Дайте какой-нибудь идентификатор вашему родительскому 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>

Тогда в jQuery:

$('div#parent div:last').each(function() {
    var p = $(this).parent();
    $(this).height(p.height() - ($(this).offset().top - p.offset().top));
});

Answer 2

Я думаю, что у меня есть правильный способ сделать это без 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>

Ключ «переполнение: скрыт» на главном элементе div, так как при установке высоты второго элемента div на 100% его высота составляет 500 пикселей.