DIV不與指定的背景顏色呈現

我有CSS下面的HTML代碼：DIV不與指定的背景顏色呈現

<!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。

來源

2012-01-20 BigMac66

您在W3School上找到的東西沒有按照您的希望工作就不足爲奇了。見http://w3fools.com – Phrogz

不知道 - 讓我笑起來:) – BigMac66

問題是height:100%;。這意味着元素使用其父級的所有高度，在這種情況下爲012px，這是0px，因爲它的所有內容都使用absolute定位。

如果您希望每個div都具有文本大小，或者如果要將相同高度應用於兩個div，則可以將其刪除。

來源

2012-01-20 18:49:45 Baldrick

這是正確的答案。如果另外設置overflow：hidden，則可以看到'height：100％'的效果，表明該元素的高度爲零，因此所有內容都會溢出，因此會在元素區域外顯示（如果顯示）。 –

我選擇了這個答案，因爲它更全面地解釋了發生了什麼事情，這讓我做出了不同的改變來實現我想要的結果。具體來說，我沒有刪除滾動或隱藏的高度屬性，但添加了一個高度：30％的菜單屬性。一旦菜單div高度一切都按照我想要的方式進行。謝謝。 – BigMac66

從您的div.scroll和div.hidden中刪除height: 100%; CSS類。

來源

2012-01-20 18:43:04 techfoobar

DIV不與指定的背景顏色呈現

回答

相關問題