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，也许宽度：100％，以便它占据整个区域...

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

给它一个内联块的显示使得它之外的所有内容都认为它是一个内联级元素，但它内部的所有内容都被视为块级元素，它最终会给它内部的任何东西提供高度可能会浮动，而不必给它一个设定的高度。

Answer 3

尝试：

#footer{
  clear:both;
}

demo

CSS DIV不会调整其高度

3 个答案: