流體佈局不工作在CSS

Question

我想要建立一個流體值（高度和寬度百分比）的簡單佈局。我有一個容器和一個包裝器，但無論如何，我似乎無法改變包裝器的寬度和高度值。

我得到具有以下值的包裝：

div.wrapper{ 
    height: 80%; 
    width: auto; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

以及與相同的代碼但更寬的容器。當我刪除溢出：隱藏值時，包裝將變得非常薄，並且實際上並沒有「包裹」任何內部元素。

由於這是一種複雜的問題，我貼在我的JSBin整個佈局： http://jsbin.com/folaveda/1/

的問題是明顯的有作爲，以及所有導致它的CSS。

Answer 1

您需要設置容器在height財產，那麼你可以設置孩子.wrapper消耗其父元素的百分比。百分比height s和width s是相對於它們的直接父元素的維度。在你的場景中，父元素只消耗其子內容的維度，因此是你感知的問題。調整家長的尺寸，你會得到你的解決方案。

注，你可能需要明確設置body和html元素的尺寸類似100%，或者說是更適合您的方案的值。