Question

我有以下带有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。

Answer 1

从height: 100%;和div.scroll CSS类中删除div.hidden。

Answer 2

问题是height:100%;。这意味着该元素使用其父级的所有高度，在本例中为<div class="menu">，为0px，因为其所有内容都位于absolute。

如果您希望每个div具有其文本大小，则可以将其删除;如果要对两个div应用相同的高度，则可以设置像素高度。

DIV没有显示指定的背景颜色

2 个答案: