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/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

Answer 2

关闭之前<div id="content">添加一个包含clear 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>

Answer 3

如果你想要包含浮点数，我相信你可以（令人惊讶地）使用溢出属性这样做;

#container {
    overflow: hidden;
}

您可以在此处找到另一种更多跨浏览器的方法：http://colinaarts.com/articles/float-containment/

Answer 4

你应该把这个：

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

每个div之间的

（在<div id="content">，<div id="footer">和<div id="lastpart">之间。）

动态高度div

4 个答案: