logo标签列表

将背景色应用于空的div元素

htmlcss
3

我刚开始着手开发一个新网站，现在正在尝试规划每个元素的位置。我创建了一些想要的

标签。但是在用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;
}
3个回答
2

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

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

高度需要一个值.. 20% 是什么？尝试 height: 30px 看看。

也许你可以尝试：height: 20vh;。

将会达到你想要的效果：20%。

.header {
    width: 100%;
    height: 20vh;
    background-color: #7fffd4ad;
}
哦，谢谢，我在另一个项目中使用过 vh，我忘记它并不与 width 相同。 - Zombie_Slayer_19
@Zombie_Slayer_19，如果我的回答对你有帮助，你可以接受这个答案。也许会在未来帮助到其他人。再见。 - Ikkyy
0

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

视口高度 (vh)。该单位基于视口的高度。1vh 的值相当于视口高度的 1%。

您可以访问 Css 视口单位 获取更多详情。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接