Question

<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，则无法获得背景信息。为什么？干杯

Answer 1

浮动元素不会影响其容器的高度。您正在遇到IE中的错误，因为您没有触发标准模式是一个相当现代的Doctype。

请参阅complex spiral以获取有关为何以这种方式工作的解释，并Ed Elliot's blog提供了一些更好的方法来计算高度中的浮点数。

Answer 2

尝试为div分配高度。

为什么这个css的background-color属性不起作用？

2 个答案: