让 div (height) 占据父级剩余高度

Question

http://jsfiddle.net/S8g4E/

我有一个容器 div 和两个孩子。第一个孩子有一个给定的身高。如何让第二个孩子占据容器div 的“空闲空间”而不给出特定高度？

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

---

类似这个问题：How to make div occupy remaining height?

但我不想给出绝对位置。

Answer 1

我的答案只使用 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;
}

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

Answer 2

摘要

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

我的要求：

• 当元素的内容大小小于或大于剩余空间大小 /strong>（在第二种情况下，滚动条应该显示）；
• 当计算父级高度并且未指定时，该解决方案应该有效；
• calc() 不应用作作为剩余元素不应该知道任何事情关于其他元素的大小；
• 应该使用现代和熟悉的布局技术，例如flexboxes。

---

解决方案

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

---

JSFiddle (element has direct parents with computed height)

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

Answer 3

扩展#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- 前缀，因此请确保验证您希望支持的浏览器中的功能。

弹性盒

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

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

请务必注意，IE10 和 IE11 对某些 flexbox 属性的支持可能存在问题，而 IE9 或更低版本根本不支持。

计算高度

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

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

它得到了相当广泛的支持，唯一值得注意的例外是 calc 与 transform 或 box-shadow 结合使用，因此如果您担心，请务必在多个浏览器中进行测试你。

其他替代品

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

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

或者，如果#up 的高度是固定的，您可以将其绝对定位在容器内，并为#down 添加一个 padding-top。

另外一种选择是使用表格显示：

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

我问这个问题已经快两年了。我刚刚提出了解决我遇到的这个问题的 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 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);