将div分成两部分，占用所有可用的垂直空间

Question

我试图在两个并排的div中拆分一个div。我知道这里有几个例子，但我已经搜索过，但没有找到一个允许div在垂直方向占用所有可用空间而没有任何内容。

看看http://jsfiddle.net/kpDDM/3/

Answer 1

要为div设置百分比高度，其父元素必须具有特定高度。在这种情况下，您似乎希望它基于视口高度。为此，每个祖先div的高度必须为100％：

*, html, body, .parent {
    height: 100%;
}

JS小提琴：http://jsfiddle.net/kpDDM/6/

Answer 2

在div标记中添​​加 。因为它们是100％而非固定像素，所以它们需要内部的东西才能使它们可见。

如果你想让div标签100％的页面，那么你需要说明页面是100％（所以div标签了解100％是什么）。

* { height:100%; }

不需要将body和html标签更改为100％。

Answer 3

您的parent分隔符占用％高度，即使它的父容器body没有明确的高度值。这表示您的parent分隔符会覆盖height:auto，而不会达到您想要的高度。

如果您希望此功能正常工作，则需要为parent声明固定高度。如今的现代浏览器不支持父body的默认显式高度金额。

因此，您需要确保明确定义html和body分隔符高度，如下所示：

html, body {
    height:100%;
}

享受并祝你好运！