Question

<style>
body{
 background:#FF9900;
 color:#FFFFFF;
 }
.wrapper{
    width:900px;
    height:auto;
    padding:0px;
    margin:auto;
    background:#000000;
    }
.header{
    width:900px;
    height:50px;
    float:left;
    padding:0px;
    margin:0px;
   }
.body_content{
    width:900px;
    height:200px;
    float:left;
    padding:0px;
    margin:0px;
    }
.fotter{
    width:900px;
    height:50px;
    float:left;
    padding:0px;
    margin:0px 0px 25px 0px;
    }   
</style>


   <div class="wrapper">
    <div class="header">Header</div>
    <div class="body_content">Body Content</div>
    <div class="fotter">Footer</div>
    </div>

如果我给一个包装div高度：“500px”我可以看到背景颜色为黑色。但如果我改变到高度=“自动”，我看不到颜色。

有人可以帮我这个吗？

请看这里.. link text

Answer 1

将overflow: hidden或overflow: auto添加到#wrapper个样式。

你必须这样做，因为默认情况下，里面有浮动元素的容器没有任何高度，所以你必须使用上面的hack（或其他一些）强制浏览器给容器一些高度。 / p>

您还可以添加<div style="clear: both;"></div>作为#wrapper中的最后一个元素，这也应该有效。

Answer 2

是因为你的内容为零吗？添加'lorem ipsum'，看看你得到了什么。

Answer 3

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<style>
body{
 background:#FF9900;
 color:#FFFFFF;
 }
#wrapper{
    width:900px;
    height:auto;
    padding:0px;
    margin:auto;
    background-color:#990000;
    clear:both;
    }
.header{
    width:900px;
    height:50px;
    float:left;
    padding:0px;
    margin:0px;
   }
.body_content{
    width:900px;
    height:200px;
    float:left;
    padding:0px;
    margin:0px;
    }
.footer{
    width:900px;
    height:50px;
    float:left;
    padding:0px;
    margin:0px 0px 25px 0px;
    }   
</style>

<body>
   <div id="wrapper">
    <div class="header">Header</div>
    <div class="body_content">
      <p>Body Content</p>

    </div>
    <div class="footer">Footer</div>
    <hr/>

    </div>
</body>
</html>

希望这能解决问题

我怎样才能保持包装div高度自动？

3 个答案: