Question

我有一个有两个孩子的容器div。第一个孩子有一个给定的高度。如何在不给出特定高度的情况下让第二个孩子占据容器div的“自由空间”？

在示例中，粉红色div也应占据空白区域。

与此问题类似：How to make div occupy remaining height?

但我不想给绝对位置。

Answer 1

扩展#down子级以填充#container的剩余空间可以通过各种方式完成，具体取决于您希望实现的浏览器支持以及#up是否具有已定义的高度

<强>样品

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

<强>网格

CSS的grid布局提供了另一种选择，尽管它可能不如Flexbox模型那么简单。但是，它只需要设置容器元素的样式：

.container { display: grid; grid-template-rows: 100px }

grid-template-rows将第一行定义为固定的100px高度，剩余行将自动拉伸以填充剩余空间。

我非常确定IE11需要-ms-前缀，因此请务必验证您希望支持的浏览器中的功能。

<强> Flexbox的

CSS3的Flexible Box Layout Module (flexbox)现在得到了很好的支持，可以非常容易地实现。因为它很灵活，所以当#up没有定义的高度时它甚至可以工作。

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

重要的是要注意IE10＆amp; IE11对某些flexbox属性的支持可能有问题，IE9或更低版本根本没有支持。

计算出的高度

另一个简单的解决方案是使用CSS3 calc功能单元as Alvaro points out in his answer，但它要求第一个孩子的高度为已知值：

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

它受到广泛支持，唯一值得注意的例外是＆lt; = IE8或Safari 5（不支持）和IE9（部分支持）。其他一些问题包括将 calc 与 transform 或 box-shadow 结合使用，因此请务必在多个浏览器中进行测试你。

其他替代方案

如果需要较旧的支持，您可以将height:100%;添加到#down，将粉红色div设为全高，只需注意一点。它会导致容器溢出，因为#up正在将其推下来。

因此，您可以将overflow: hidden;添加到容器中以解决此问题。

或者，如果#up的高度固定，您可以将其绝对放置在容器中，并将填充顶部添加到#down。

而且，另一种选择是使用表格显示：

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}

Answer 2

我提出这个问题差不多两年了。我刚刚提出了css calc（）来解决我遇到的这个问题，并认为如果有人遇到同样的问题会很好。（顺便说一句，我最终使用绝对位置）。

http://jsfiddle.net/S8g4E/955/

这是css

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

有关它的更多信息，请访问：http://css-tricks.com/a-couple-of-use-cases-for-calc/

浏览器支持：http://caniuse.com/#feat=calc

Answer 3

摘要

我没有找到一个令人满意的答案，所以我必须自己找出答案。

我的要求：

当元素的内容大小小于或小于剩余空间大小时，元素应精确地剩余空间< / strong>（在第二种情况下，应显示滚动条 ）；
当计算父母身高并且未指定时，该解决方案应该起作用；
calc()不应该使用，因为其余元素对其他元素大小一无所知；
现代和熟悉的布局技术，例如 flexboxs 。

解决方案

变成弹性框所有具有计算高度的直接父级（如果有）和指定高度的下一个父级；
将flex-grow: 1指定为具有计算高度（如果有）的所有直接父级和元素，这样当元素内容大小时，它们将占用所有剩余空间较小；
将flex-shrink: 0指定为所有高度固定的flex项目，这样，当元素内容大小大于剩余空间大小时，它们就不会变小；
将overflow: hidden指定为所有具有计算高度的直接父级（如果有），以禁止滚动并禁止显示溢出内容；
将overflow: auto指定为元素以启用其内部滚动。

JSFiddle (element has direct parents with computed height)

JSFiddle (simple case: no direct parents with computed height)

Answer 4

我的回答只使用CSS，它不使用overflow：hidden或display：table-row。它要求第一个孩子确实具有给定的身高，但在你的问题中，你要说明只有第二个孩子需要高度未指定，所以我相信你应该认为这是可以接受的。

HTML

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

CSS

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

Answer 5

除非我误解，否则您只需将height: 100%;和overflow:hidden;添加到#down。

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}

Live DEMO

编辑：由于您不想使用overflow:hidden;，因此您可以在此方案中使用display: table;;但是，在IE 8之前不支持它。（display: table; support）

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}

Live DEMO

注意：您已说过，#down身高应为#container身高减去#up身高。 display:table;解决方案正是如此，而this jsfiddle将非常清晰地描绘出来。

Answer 6

查看演示 - http://jsfiddle.net/S8g4E/6/

使用css -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

Answer 7

您可以使用浮动来推送内容：

http://jsfiddle.net/S8g4E/5/

您有一个固定大小的容器：

#container {
    width: 300px; height: 300px;
}

允许内容在浮动旁边流动。除非我们将浮点数设置为全宽：

#up {
    float: left;
    width: 100%;
}

虽然#up和#down分享了最高职位，但#down的内容只能在浮动#up的底部之后开始：

#down {
    height:100%;
}

Answer 8

我不确定它是否可以纯粹用CSS完成，除非你觉得用幻象来伪装它。也许使用Josh Mein的答案，并将#container设置为overflow:hidden。

对于它的价值，这是一个jQuery解决方案：

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);

使div（高度）占据父级剩余高度

8 个答案:

摘要

解决方案