我给了包装div高度自动，但背景颜色和图像不起作用？

Question

<style>
.wrapper{
    width:900px;
    height:auto;
    padding:0px;
    margin:auto;
    background:#000000;
    position:relative;
    }
.header{
    width:900px;
    height:200px;
    float:left;
    padding:0px;
    margin:0px;
    background:#00FFFF;
    }
.body_content{
    width:900px;
    height:500px;
    float:left;
    padding:0px;
    margin:0px;
    background:#6666FF;
    }
.fotter{
    width:900px;
    height:150px;
    float:left;
    padding:0px;
    margin:0px 0px 25px 0px;
    background:#336600;
    }   
</style>

---

<div class="wrapper">
<div class="header"></div>
<div class="body_content"></div>
<div class="fotter">sss</div>
</div>

Answer 1

由于您在包装器中浮动所有内容，浏览器将不会拾取包装器div的大小，即它认为它具有“零”高度。

解决方案：

在包装器中使用魔法溢出关键字：

.wrapper{
    overflow:auto;
    //...

 }

Answer 2

这就是我所看到的：

你有什么期待？

Answer 3

@sridhar，

对于div，应该像这样给出背景颜色

background-color:#003366和背景图像应该像这样给出

background-image: url(../images/test-background.gif);