以％为单位设置元素高度[重复]

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 的每个祖先（包括 和 ）都必须具有 height: 100%，因此有一个明确的百分比高度链到 div。

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

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