在兩個拆分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％是沒有必要的。