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会正确显示。我认为这与父母没有明确的身高有关，但我想知道更多技术上的原因，以及如果我想让div成为网页高度的百分比，如何克服这个问题。

Answer 1

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

html, body{
    height: 100%;
}

虽然注意这是你的整个网页，所以如果你整个网页的整个高度是10000px而你设置的高度为3％，则3％将超出10000。

Answer 2

对于3％的问题：你可以使用css3高度：3vh，即视口的3％