html - 将 div 一分为二，占用所有可用的垂直空间

Question

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

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

Answer 1

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

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

JS fiddle :http://jsfiddle.net/kpDDM/6/