我有以下带有 CSS 的 HTML 代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.scroll
{
background-color:#00FFFF;
position:absolute;
top:0%;
left:0%;
width:10%;
height:100%;
}
div.hidden
{
background-color:#00FF00;
position:absolute;
top:0%;
left:50%;
width:20%;
height:100%;
}
div.menu
{
position:absolute;
top:70%;
left:20%;
width:80%;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<div class="menu">
<div class="scroll">Scroll: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<div class="hidden">Hidden: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</div>
</body>
如您所见，我希望其中两个分区有颜色——它们没有，我也不知道为什么。该文件具有 html 扩展名，我已经使用 IE7 和 FF 3.0.3 进行了测试。
最让我困惑的是，它几乎是 W3C 学校的一个例子的逐字复制，它确实显示了颜色!示例链接:W3C example .
最佳答案
问题是height:100%; .这意味着该元素使用其父元素的所有高度，在本例中为 <div class="menu"> , 这是 0px 因为它的所有内容都定位在 absolute .
如果你想要每个div，你可以删除它具有其文本的大小，或者如果要对两个 div 应用相同的高度，则以像素为单位设置高度。
关于html - DIV 不显示指定的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8946203/