Question

我刚开始在一个新网站上工作，而我只是试图确定一切将要进行的地方。我做了一些我想要的东西。尝试在CSS中向其添加背景色时，它不会应用该颜色。

HTML

<body>
    <div class="header"></div>
    <div class="hero"></div>
    <div class="ads"></div>
    <div class="content-1"></div>
    <div class="content-2"></div>
    <div class="form"></div>
    <div class="footer"></div>
</body>

CSS

html {
    font-family: 'Muli', sans-serif;
}

.header {
    width: 100%;
    height: 20%;
    background-color: #7fffd4ad;
}

Answer 1

将高度更改为像素或rems，而不是百分比（％）。百分比基于父元素的值（当前为0）。

.header {
 width: 100%;
 height: 20vh; // or 20px, 1em, 1rem ...
 background-color: #7fffd4ad;
}

Answer 2

高度需要一个值。什么是20％？尝试将高度设置为：30px以查看。

也许您可以尝试：高度：20vh；

愿意做什么：20％

.header {
    width: 100%;
    height: 20vh;
    background-color: #7fffd4ad;
}

Answer 3

.header {
    width: 100%;
    height: 20vh; 
    background-color: #7fffd4ad;
}

视口高度（vh）。该单位基于视口的高度。 1vh等于视口高度的1％。

您可以访问它以获得更多详细信息：Css Viewport Units

将背景颜色应用于空div

3 个答案: