html - Div 不会填充百分比高度，会填充像素高度。为什么？

Question

我正在使用 div 来创建重音。它的父级是内容 div，它没有特定的高度，因为它是浏览器的高度。 div 很简单，如下所示:

<div class="bar-top"></div>

它的 CSS 规则是:

.bar-top {
    background-color: #000d12;

    height:     3%;
    max-height: 3%;
    min-height: 3%;
}

这条规则不起作用。但是，如果将百分比替换为像素值，则 div 会正确显示。我认为这与没有确定高度的 parent 有关，但我想从技术上更了解原因，以及如果我希望 div 占网页高度的百分比，如何克服这个问题。

Answer 1

简单的数学 100% 的什么都不是。关于高度基于容器的父级，您是正确的。您可以在页面的最顶部元素 html 和 body 中使用 % height，如下所示。

html, body{
    height: 100%;
}

请注意，这是您的整个网页，因此如果您整个网页的总高度为 10000 像素，并且您将高度设置为 3%，则 3% 将超出 10000。