Question

我有一个带有两个嵌套div的div。第一个孩子根据其内容有不同的高度，我希望第二个div的高度是父母留下的任何东西。

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

我该怎么做？

谢谢，〜在圣地亚哥

Answer 1

它需要一些javascript。我看到你正在使用jQuery，所以这应该有效：

为您的父div提供一些ID：

<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像素。

如何使DIV占据容器div的其余高度？

2 个答案: