动态高度 div答案

【问题标题】：Dynamic height div动态高度 div
【发布时间】：2012-02-28 00:35:53
【问题描述】：

查看此代码：

<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 的所有可能值，但没有一个有用。我该怎么办？

提前致谢。

【问题讨论】：

在内容中尝试没有高度
在第三行之后。看不到 thirdRow 的样式，但未清除的浮动可能会给您带来麻烦。
@Mikael Härsjö 它有效，但它清除了他们的背景：i44.tinypic.com/w9jn6r.png

标签： html css height

【解决方案1】：

这似乎是一个经典的“CSS 断头台”。行上的浮动阻止 #container 调整到它们的大小。

看看这个解释一切的页面：

http://css-class.com/articles/explorer/guillotine/

简而言之。将此 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）

【讨论】：

+1 表示没有额外的标记元素，-1 表示 ie 的额外样式表和无语义的“clearfix”类名——我建议将这些规则添加到现有的选择器中。就是说，我无法相信这里有多少答案希望您在 html 中添加一个清晰的标签，这是一个可怕的建议！这好多了:)

【解决方案2】：

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

#container {
    overflow: hidden;
}

你可以在这里找到另一个更跨浏览器的方法：http://colinaarts.com/articles/float-containment/

【讨论】：

【解决方案3】：

你应该这样写：

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

在每个 div 之间。

（介于：<div id="content">,<div id="footer"> 和 <div id="lastpart">。）

【讨论】：

【解决方案4】：

在关闭 <div id="content"> 之前，添加一个带有 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 &copy; example.com , All rights reserved. </div>

【讨论】：