html - 垂直列 (div) の自動ストレッチ

Question

このフィドルをチェックしてください：

次のものが必要です。赤い列にはテキストがあり、黄色は動的コンテンツであり、緑には何もなく、色だけです。赤と緑の両方の列を黄色のコンテンツと同じ高さにしたい。height: 100%動作しませんでした

Answer 1

ワーキングデモ

簡単な解決策ではありませんが、うまくいきます：

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

代わりにリストを使用してみてください。それをテーブル行
として表示し、リスト項目をテーブルセルとして表示すると、すべてのリスト項目が同じ高さになります。

jsFiddle:

http://jsfiddle.net/Q7MFX/4/

コード：

<ul style="list-style:none;padding:0;display:table-row">
    <li style="display:table-cell;background-color: red;">11<br>11<br>11<br></li>
    <li style="display:table-cell;background-color: yellow;">22342<br>dsfsdf<br>sdfs df<br>v sdfsdf s dffffffffffffffff</li>
    <li style="display:table-cell;background-color: green; width: 40px;">11</li>
</ul>