设置元素高度（％）

Question

在this JSFiddle中，他们展示了如何将页面拆分为3个部分。

但如果我将#wrapper宽度更改为100%它会正常工作，那么为什么如果我将height:400px更改为height:100%会失败？

#wrapper {
    width: 400px;
    height:400px;
}

如何以百分比“％”覆盖整个页面？

Answer 1

你不应该在CSS中使用百分比高度。

根据this SO answer：

  

要设置百分比高度，其父元素（*）必须具有显式高度。这是相当不言而喻的，因为如果你将高度保留为自动，则该块将采用其内容的高度...但是如果内容本身具有以父亲的百分比表示的高度，那么你自己就是little Catch 22.浏览器放弃并仅使用内容高度。

     

因此div的父级必须具有显式的height属性。虽然如果你想要的话，这个高度也可以是一个百分比，这只会将问题提升到一个新的水平。

     

如果你想让div高度占视口高度的百分比，div的每个祖先，包括和，必须有高度：100％，所以有一个明确的百分比高度链到div。< / p>

这意味着父元素必须具有显式高度（在您的情况下不是这样）。这是因为block元素的高度默认为内容的高度，而width默认为100％。这就是您的width: 100%有效的原因。

因此，要获得与width:100%类似的功能，只有当它及其所有父元素都设置为height: 100%时才会有效（在本例中为body和{{ 1}}元素）。