CSS DIV不會調整其高度

Question

我不能像預期的那樣使用它，我對CSS不太滿意，需要您的幫助！

我有一個這樣的頁面：

<html>
<head><title>title</title></head>
<body>
<div id="page">
    <div id="container">
        <div id="head"><img src="..." alt="..." /></div>
        <div id="content">
            <div id="menu"><ul><li>...</li></ul></div>
            <div id="content_body">stuff here</div>
        </div>
        <div id="footer"></div>
    </div>
</div>
</body>
</html>

好。我的容器div具有背景顏色，我想要，只要我在content_body div內的文本擴展，容器div的背景也會擴展，但是它保持固定的高度（只是在擴展徽標圖像的高度），我在菜單和content_body div中的文本不在背景中。

我的CSS：

body
{
    font-family: Tahoma, Verdana, Arial, Times New Roman;
    background-color: #333333;
    background-image: url(Images/bg.png);
    background-repeat: repeat-x;
    color: #000000;
    margin: 0px;
}
input 
{
    font-family: Tahoma, Verdana, Arial, Times New Roman;
    font-weight: bold;
}
h2
{
    text-decoration: underline;
    font-style: italic;
}
#page
{
    width: 100%;
}
#container
{
    overflow: visible;
    width: 780px;
    border: solid 6px #FFFFFF;
    background-color: #DCDCCD;
    margin: 0 auto;
    margin-top: 15px;
}
#content
{
    clear: both;
}
#menu
{
    width: 240px;
    display: block;
    float: left;
}
#content_body
{
    width: 500px;
    display: block;
    float: right;
}

我做錯了什么？

Answer 1

嘗試

#content
{
    ...
    overflow: auto;
}

編輯：還要確保添加寬度，因為DA在下面的注釋中指出。

Answer 2

#content div中的所有內容都是浮動的，而且浮動元素實際上並不會占用任何空間。 本質上，由於它們是浮動的，因此它們被帶到常規內容流之外，並且破壞了規則以能夠向左或向右推送。

為了使div包含浮動元素的大小及其內容，您可以給它顯示：inline-block，也許width：100％，以便占據整個區域...

#content{ display: inline-block, width: 100%; }

給它顯示inline-block會使它之外的所有內容都認為它是一個inline-level元素，但是將其內部的所有內容都視為它是一個block-level元素，它最終使其中可能是浮動而不必給它設定高度。

Answer 3

嘗試：

#footer{
  clear:both;
}

演示

CSS DIV不會調整其高度

問題描述

3 個解決方案

解決方案1
6 2009-10-05 19:27:37

解決方案2
6 已采納 2009-10-05 19:28:16

解決方案3
0

CSS DIV不會調整其高度

問題描述

3 個解決方案

解決方案1 6 2009-10-05 19:27:37

解決方案2 6 已采納 2009-10-05 19:28:16

解決方案3 0

解決方案1
6 2009-10-05 19:27:37

解決方案2
6 已采納 2009-10-05 19:28:16

解決方案3
0