在两个拆分div采取所有可用的垂直空间

Question

我想在两个并排div 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

你parent分频器需要％的高度，即使它的父容器，body，没有一个明确的身高的数量。这意味着您的parent分配器会替代height:auto，而不会让您的身高达到您想要的高度。

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

因此，你需要确保你明确地定义，像这样的html和body分隔高度：

html, body { 
    height:100%; 
} 

享受和好运气！

Answer 3

在您的div标签中添加 。因为它们是100％而不是固定像素，所以它们需要内部的东西来使它们可见。

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

* { height:100%; }

改变身体和html标签，以100％是没有必要的。