2010-10-13 79 views
0
<body> 
    <div> 
     <div id="ROOT" > 
      <div id="ROOT_0" > 
       header 
      </div> 

      <div id="ROOT_1" > 
       main 
      </div 

      <div id="ROOT_2" > 
       footer 
      </div> 
     </div> 
    </div> 
</body> 

html {height:101%;} 
body {background:#FFFFFF;} 

#ROOT{ background-color:#666666; width:980px; margin-left:auto; margin-right:auto;}  
#ROOT_0{background-color:#FF9933; width:970px; text-align:center; float:left; margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px;}  
#ROOT_1{width:980px; text-align:center; float:left;}  
#ROOT_2{background-color:#FF9933; width:970px; text-align:center; float:left; margin-top:10px; margin-bottom:5px; margin-left:5px; margin-right:5px;} 

IE獲得正確的背景。如果我嘗試使用Chrome或Firefox,則不會獲得背景。爲什麼?歡呼聲爲什麼用這個CSS背景顏色屬性不起作用?

回答

4

浮動元素不會影響其容器的高度。您在IE中遇到錯誤,因爲您沒有觸發標準模式是一種相當現代的Doctype。

請參閱complex spiral瞭解爲什麼事情以這種方式工作,Ed Elliot's blog爲許多更好的方法來計算浮標的高度。

+0

uhm。如果我寫float:left;在#ROOT上,我可以看到背景變化。但是,主要的股利走向左側,並沒有更多的中心:( – markzzz 2010-10-13 14:07:24

+0

你的答案是在他的文章中,嘗試閱讀它們 – Tim 2010-10-13 14:10:23

+1

所以不要浮動根!還有其他的方法,你選擇了第四名愛的博客我一般會使用自己的溢出方法 – Quentin 2010-10-13 14:10:35

0

嘗試爲div分配高度。