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

Question

Как я могу заставить 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 в Сан-Диего

9

javascript jquery html css

задан Hcabnettek 7 January 2010 в 20:44

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>

Ключ "overflow: hidden" в главном div, так как установка высоты второго div на 100% делает его высотой 500 пикселей. .

3

ответ дан 4 December 2019 в 19:33

Другие вопросы по тегам:

javascript jquery html css

Похожие вопросы:

score 9 · Accepted Answer

Нужен какой-нибудь 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));
});