Css % 与高度 [重复]答案

【问题标题】：Css % with height [duplicate]Css % 与高度 [重复]
【发布时间】：2016-08-12 13:29:33
【问题描述】：

您可以尝试使用检查元素。为什么我不能用% 更改header 标签的高度或它的背景图像？我尝试过使用 px，它的工作原理是这样的。例如 height:800px; 但如果我使用height:80%;，它就行不通了。有人可以解释这是如何工作的吗？我不知道我做错了什么。

【问题讨论】：

对于header 尊重以百分比给出的高度，它的父级也必须有一个height，如果它也以百分比给出，下一个父级等。你能告诉我是否是这样吗？ ...人们经常以这条规则结束html, body { margin: 0; height: 100%; }
可能重复stackoverflow.com/questions/8262852/…和stackoverflow.com/questions/16642866/…和stackoverflow.com/questions/21357238/…
@LGSon 是的，这是缺少 html, body { margin: 0; height: 100%; }.Tnx 很多伙伴，为我节省了很多时间！

标签： html css

【解决方案1】：

当你给高度是 % 值时，它的引用也指向这个元素的父元素。如果你想强制 header 占据屏幕高度的 80%，你必须通过将其设置为 position:absolute 将其从 DOM 流中取出。

所以 css 可以是这样的：

.header-image {
position: absolute;
height: 80%;
}

【讨论】：