流体布局不工作在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%，或者说是更适合您的方案的值。