Div 没有高度，除非我给它最小高度

Question

我认为这是因为我将所有三个 div“列”浮动到左侧，主体 div 内部。

我怎样才能告诉主体 div 扩大到适合内容 div 所需的大小？

这里是最小高度：

这里去掉了最小高度：

这是我的相关代码。

#body
{
    border:1px solid blue;
    width:950px;
    margin-left:auto;
    margin-right:auto;  
    margin-top:15px;
}

#leftcolumn
{
    min-height:500px;
    float:left;
    width:190px;
}

#contactarea
{
    font-family:Arial;
}

#contactarea p.heading
{
    Color:#000;
    font-size:large;
    position:relative;
    left:14px;
}

#contactarea p.tag
{
    color:#000;
    font-size:medium;
    position:relative;
    left:10px;
}

#leftnavigation ul
{
    margin:0;
    padding: 0;
    list-style: none;
}
#leftnavigation ul li {
    border-top: 1px solid #333;
    border-bottom: 1px solid #111;
}
#leftnavigation ul li:first-child {border-top: none;}
#leftnavigation ul li:last-child {border-bottom: none;}
#leftnavigation ul li a 
{
    padding: 10px;
    display: block;
    color: #fff;
    background-color:#222222;
    text-decoration: none;
}
#leftnavigation ul li a:hover {background: #111;}

#contentarea
{
    border:1px solid blue;
    min-height:500px;
    float:left;
    width:594px;
    margin-left:5px;
    margin-right:5px;
}

#advertisingarea
{
    width:150px;
    float:left;
    min-height:500px;
    background-image:url('images/advertisingAreaBackground.png');
    background-repeat:repeat-y;
}

.advert
{
    height:190px;
    overflow:hidden;    
}

.advert img
{
    padding:0;
    margin:0;
    position:relative;
    left:25px;
    top:5px;
}

.advert p
{
    font-size:x-small;
    font-family:Arial;
    margin-left:8px;
    margin-right:8px;
    margin-top:5px;
}

<div id="body">
    <div id="leftcolumn">
        <div id="leftnavigation">            
            <ul>
                <li><a href="#">Automoviles</a></li>
                <li><a href="#">Clases y Talleres</a></li>
                <li><a href="#">Electronicos</a></li>
                <li><a href="#">Inmobiliaria</a></li>
                <li><a href="#">Libros</a></li>
                <li><a href="#">Musica, Peliculas y Juegos</a></li>
                <li><a href="#">Ninos</a></li>
                <li><a href="#">Otros</a></li>
                <li><a href="#">Ropa</a></li>
            </ul>
        </div>
        <div id="contactarea">
            <p class="heading">Anuncios Premium</p>
            <p class="tag">Destaque sus anuncios con una cuenta premium!</p>
        </div>
    </div>
    <div id="contentarea">sdfg<h1>asdasd</h1></div>
    <div id="advertisingarea">
        <div class="advert">
            <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
        </div>

        <div class="advert">
            <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
        </div>

        <div class="advert">
            <a href="#"><img src="../../Content/images/advertImage.png" alt="Advert" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
        </div>
    </div>
</div>

Answer 1

最简单的方法就是set the oveflow of the container:

#body
{
    ...
    overflow: auto;
}

Answer 2

如果你已经浮动了其他元素，你必须浮动它（float:left）。

要使浮动 div 居中，最好的跨浏览器解决方案是将其包装在另一个非浮动 div（不可见）上并将该 div 居中。像这样的：

<div id="centered">
   <div id="floated">
   </div>
</div>

这样你可以让内部 div 包裹它包含的元素而不指定任何高度值，而外部 div（不可见，只有宽度）保持居中；）

Answer 3

你应该使用 firebug 来解决这样的 css 问题。您会惊讶于它的实用性。

回答您的问题 - 由于浮动元素，它没有高度。您需要清除该元素中的浮动，以便父元素按预期显示。您可以通过几种方式做到这一点。

创建一个清晰的类并简单地将其作为元素添加到浮动之后：

<style>
.clear{clear:both;}
</style>
<div class="parent">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
    <div class="clear"></div>
</div>

对任何具有“容器”类的元素进行更适当的自动清除：

<style>
.container:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.container {
 display: inline-block;
}

html[xmlns] .container {
 display: block;
}

* html .container {
 height: 1%;
}
</style>
<div class="parent container">
    <div class="float_left">left</div>
    <div class="float_right">right</div>
</div>