我正在尝试使用 CSS 绘制由 2 个 div 组成的标题
<!DOCTYPE html>
<html>
<head>
<style>
#header-top {
width: 100%;
height: 15%;
background-color: #4d6186;
}
#header-bottom {
padding-left: 20%;
width: 100%;
height: 5%;
background-color: #606060;
box-shadow: 0px 10px 5px #888888;
}
#logo {
position: absolute;
height: 25%;
}
#faro {
position: absolute;
top: 2%;
right: 5%;
height: 20%
}
#content {
}
</style>
</head>
<body>
<img id="logo" src="img/taberna-pirata.png" alt="La taberna pirata">
<img id="faro" src="img/faro.png">
<div id="header-top"> </div>
<div id="header-bottom">
<!--<h1>Welcome to the bay</h1>-->
</div>
<div id="content">
</div>
</body>
</html>
但彩色 div 只有在 div 中有内容时才有效。如果为空，则不会显示。
我做错了什么？
最佳答案
您需要将容器元素设置为一个高度。否则，您要求浏览器将高度设置为未知值的 100%，但它不起作用。在您的情况下，容器将是 body 和 html。
或者您可以添加一个 作为占位符而不是空的。同样，% 将不起作用。
<div id="header-bottom">
</div>
关于html - Css 彩色 block 如果为空则不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28975314/