我如何保持包裝div高度自動？

<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」，我可以看到背景顏色黑色。但如果我改變高度=「自動」我不能看到顏色。我如何保持包裝div高度自動？

有人可以幫助我嗎？

請看這裏.. link text

來源

2010-11-24 Sridhar

添加overflow: hidden或overflow: auto您#wrapper風格。

您必須這樣做，因爲默認情況下，內部具有浮動元素的容器默認沒有任何高度，因此您必須使用上述hack（或其他）來強制瀏覽器給容器一些高度。

您還可以添加一個<div style="clear: both;"></div>作爲您的#wrapper中的最後一個元素，這也應該可以工作。

來源

2010-11-24 10:46:26

如果我將它設置溢出：隱藏或溢出：汽車..我得到一個滾動 – Sridhar 2010-11-24 10:53:50

看到我更新... – 2010-11-24 11:02:41

是因爲你的內容爲零嗎？添加'lorem ipsum'並看看你得到了什麼。

來源

2010-11-24 10:46:40

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

希望這將解決這個問題

來源

2014-05-29 07:54:20

我如何保持包裝div高度自動？

回答

相關問題