html - 将 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% 而不是固定像素，所以它们需要内部的东西才能使它们可见。

If you want to make the div tags 100% of the page, then you need to state the page is 100% (so the div tags understand what 100% is).

* { height:100%; }

Changing the body and html tags to 100% is not necessary.

Answer 3

parent即使它是父容器，你的分隔线也需要一个 %height body，没有明确的高度量。这表明您的parent分隔线将覆盖，height:auto而不是您想要的高度。

parent如果您希望这样做，您需要声明一个固定的高度。今天的现代浏览器不支持 parent 的默认显式高度量body。

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

html, body {
    height:100%;
}

享受和好运！