動的な高さのdiv

Question

は、このコードを参照してください。ここに私の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をしたいですit.I内部の最大のdiv要素に応じて長いか短い行くHeightのためのすべての可能な値を試してみましたが、誰も役立ちませんでした。私は何をすべきか？

ありがとうございます。

Answer 1

あなたは<div id="content">を閉じる前に明らかと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 2

古典的な "CSSギロチン"のようです。行の浮動小数点は、#containerのサイズが調整されないようにします。要するに

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

：

はすべてを説明し、このページを見てください。このCSSをページに追加し、#contentにクラスclearfixを入れてください。

<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; 
} 

あなたは別の、より多くのクロスブラウザ、こちらの方法を見つけることができます。各divの間

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

：あなたはこれを置くべきhttp://colinaarts.com/articles/float-containment/

Answer 4

を。

（間：<div id="footer">、<div id="content">と<div id="lastpart">）