动态高度div

Question

请参阅以下代码：

<div id="content">
    <div id="firstrow">    

    </div>
    <div id="secondrow">
        <div class="newsrow">    </div>
        <div class="mediarow">    </div>
    </div>
    <div id="thirdrow">

    </div>
</div>

<div id="footer">
    <ul>
        <li>Home</li>
        <li>Link1</li>
        <li>Link2</li>


    </ul>
</div>
<div id="lastpart">Copyright 2004 - 2011 &copy; example.com , All rights reserved. </div>

为了简单起见，我删除了 firstrow、newsrow、mediarow 和 thirdrow 的所有内容。这是我的 css：

#content{
    width:1250px;
    position: relative;
    top: 0px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: url("imgbg_body_03.png");
    right: 66px;
    height:2550px;

}


#firstrow{
    margin: 0px  20px 0 0;

    width:195px;
    float:right;
}

#secondrow{
    background-color:#772255;
    width:740px;
    float:right;
}
.newsrow{

    width:366px;
    float:right;
    margin: 2px 2px 2px 2px;
    text-align:right;
    color:#660066;
    /*font:bold 16px Arial;*/
}.mediarow{
    /*background:url('imgbg_index_01.png');*/
    width:366px;
    float:right;
    margin: 2px 2px 2px 2px;
}
#footer{
    background: url("imgbg_body_02.png");
    width:1250px;
    height:38px;
    position: relative;
    top: 0px;
    right:66px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
#footer ul{
    margin: 0px 0 0 0;
    padding: 5px;/* 0 0 0;*/
}
#footer ul li{
    list-style-type:circle;
    display:inline;
    color:white;
    margin : 0 35px 0 35px;
    font:bold 12px Tahoma;
}
#footer ul li:hover{
    color:#FFFF00;
}
#lastpart{
    width:1250px;
    position: relative;
    top: 0px;
    margin: 0 0 0 0;
    padding: 20px 0 0 0;
    background: url("imgbg_body_04.png");
    right: 66px;
    text-align:center;
    font-weight:bold;
    color:#660033;
    height:56px;
    direction: ltr !important;
}

我的问题是我希望 id content 的 div 根据其中最大的 div 变长或变短。我尝试了 Height 的所有可能值，但是没有人有用。我该怎么办？

提前致谢。

Answer 1

这看起来就像一个经典的“CSS断头台”。行上的浮动会阻止 #container 调整其大小。

看看这个页面，它解释了一切：

http://css-class.com/articles/探险家/断头台/

简而言之。将此 CSS 添加到您的页面，并将类 clearfix 放在您的 #content 上。

 <style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

（使用此解决方案，您不需要带有 clear:both 的额外 div）

Answer 2

在关闭

之前，添加一个带有 Clear 类和 css: 的 div，

.clear {
    clear: both;
}

这样你的 html 就会如下所示：

<div id="content">
    <div id="firstrow">    

    </div>
    <div id="secondrow">
        <div class="newsrow">    </div>
        <div class="mediarow">    </div>
    </div>
    <div id="thirdrow">

    </div>
    <div class="clear"></div>
</div>

<div id="footer">
    <ul>
        <li>Home</li>
        <li>Link1</li>
        <li>Link2</li>
    </ul>
</div>
<div id="lastpart">Copyright 2004 - 2011 © example.com , All rights reserved. </div>

Answer 3

如果你想包含浮动，我相信你实际上可以（令人惊讶地）使用溢出属性来做到这一点；

#container {
    overflow: hidden;
}

您可以在这里找到另一种更跨浏览器的方法：http://colinaarts.com/articles/float-遏制/

Answer 4

你应该把这个 :

<div style="clear: both;"> </div>

放在每个 div 之间。

（在：

、

和

。）