动态高度的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

关闭<div id="content">前添加一个div类清楚，CSS：

.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 2

它看起来像一个经典的“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 3

，我相信你可以实际（奇怪）与overflow属性做到这一点;

#container { 
    overflow: hidden; 
} 

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

Answer 4

你应该把这个：

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

每个格之间。

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