大きなdivの2つのdivは同じ高さに等しい必要があります...しかし、どうですか？だからここ

Question

は絵です：

問題は、私は、コンテナのdivで2つのdivを持っていることは何ですか。コンテナdivは高さが拡張され、2つの内側divも拡張されます。右側のdivには境界線が残っていますが、空であれば全体の高さを満たしません....どうすればいいですか？

Answer 1

左のdivに境界線を追加してみてください。コンテナdiv内のdivをクリアクラスで追加します。 .clear {クリア：：両方;}

Answer 2

あなたが話している問題は、「のどの列」と呼ばれていると報告されており、過去数年間にわたり十分に説明:) http://www.alistapart.com/articles/fauxcolumns/

次にCSSでこれを追加テーブルやディスプレイ：ボーダー

使用CSS3技術（ディスプレイ模倣します含むdivの上

• 用背景：あり、いくつかのソリューションですテーブルセルには、これらは本当にこのまたはCSS3のフレキシボックスのためのものではありません非常に実験的でおそらく動作しません要素

の高さの最大値に列の高さを設定するには、ほとんどのブラウザ）

使用JS最後の解決策は、あなたがjQueryのを使用している場合、それはそのように達成することができたので、かなり良いです。

var max=0; 
$('#container').children().each(function(){ 
    if($(this).height()>max) max = $(this).height(); 
}); 
$('#container').children().each(function(){ 
    $(this).height(max); 
}); 

スクリプトは、コンテナのすべての子を反復し、最も高い要素を見つけます。次に、それは再び反復し、それぞれに最大の高さを設定します。

Answer 3

これは、あなたが探しているものです...

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

---

また、私はあなたがfloatを使用していると仮定しているので、私は非常には、これに読み取りを与えるお勧めします。

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

...あなたのフロートをクリアすることを忘れないでください！

Answer 4

HTML

<div class="wrapper"> 
    <div class="child_1">First Div content goes here</div> 
    <div class="child_2">Second Div content goes here</div> 
</div> 

CSS

.wrapper { 
     width: 960px; 
     overflow: hidden; 
     margin: 0px auto; 
    } 

    .child_1, .child_2 { 
     padding-bottom: 9999em; 
     margin-bottom: -9999em; 
     width: 50%; 
     float: left; 
    } 

    .child_1 { 
     background: #f00; 
    } 

    .child_2 { 
     background: #0f0; 
    }