html - CSS 2 div サイズの自動同じ高さ

Question

CSS について質問があります。

どのように私はそれを行うことができます:

緑の div のコンテンツの高さが (自動) 500px の場合、赤は同じになります。

赤のコンテンツの高さが (自動) 700px の場合、緑も同じになります。

どちらにもコンテンツがあり、自動高さを使用します。

では、緑の幅が赤や赤と同じですが、「高さ：自動;」という異なるコンテンツをどのように行うことができますか?

Answer 1

まず、この優れた記事を読んでください。次に、フィドルをチェックしてください。

http://jsfiddle.net/UnsungHero97/qUT3d/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​

Answer 2

両方の DIVS を別の div 内にラップし、それらを親 DIV にぶつけてから、親のサイズを変更します。

このようなもの....次に、CSSを使用してそれらをフォーマットします

<div id=parent>
    <div id=child>
      Content....
    </div>
    <div id=child>
      Content....
    </div>
</div>

他のいくつかのソリューションは、ここにリストされている可能性があります http://www.ejeliot.com/blog/61

Answer 3

理想的には、両方のセルに min-height を設定するか、@Taeeril の回答が javascript を使用して高さを等しくすることを正しく提案しているようにします。

これは、テーブル表示タイプを使用したソリューションですhttp://jsfiddle.net/SebAshton/Pj7gy/