html - 2 つの柱を同じ高さにする

Question

同じ高さの 2 列で( Twitter Bootstrapを使用して) 2 列のデザインを作成しようとしています。

この例を見てみましょう：

<div class="row-fluid">
    <div class="span2">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>

    <div class="span10">
        test
    </div>
</div>

.span2は 2 つの柱の中で最も高いため.row-fluid、その高さに合わせて伸縮します。この記事を読んだ後、min-height: 100%オンに設定.span10すると高さがいっぱいになると思っていましたが、そうではありません。

http://jsfiddle.net/WTNeB/1/

何故ですか？.span10このデザインを柔軟に保つために、固定の高さを設定せずに、親の高さまで伸ばす解決策はありますか?

Answer 1

これを試して：

http://jsfiddle.net/WTNeB/2/

cssセレクター名を追加display:tableしdisplay:table-cell ただけでなく、必要な優先度が得られるように変更したことに注意してください。

.row-fluid {
    border: 1px dotted gray;
    display: table;
}
.row-fluid .span2 {
    border: 1px solid blue;
    display: table-cell;
    float: none;
}
.row-fluid .span10 {
    min-height: 100%;
    border: 1px solid red;
    height: 100%;
    display: table-cell;
    float: none;
}

Answer 2

そして昔ながらの古典は、フェイクコラムテクニックです。すべてのブラウザで問題なく動作し、実装も簡単です。

ただし、1 つの欠点: 背景画像を追加する必要があります (したがって、背景をbase 64 でエンコードしていない限り、もう 1 つの要求を追加する必要があります)。

「自動高さ」を持つブロック レベル要素では、高さ/最小高さを 100% に設定することはできません。