使兩列具有相同的高度

Question

我正在嘗試使用2列相同高度的2列設計（使用Twitter Bootstrap ）。

我們來看這個例子：

<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是兩列中最高的，所以它會使.row-fluid拉伸以適應其高度。 閱讀完這篇文章之后 ，我期待在.span10上設置min-height: 100%會使它伸展到最大高度，但它不會：

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

這是為什么？ 任何使.span10延伸到其父高度的解決方案，避免設置固定高度，以保持這種設計的靈活性？

Answer 1

嘗試這個：

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

請注意我添加了display:table和display:table-cell 但我也更改了css選擇器名稱，以便獲得所需的優先級。

.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

舊經典是人造柱技術。 在每個瀏覽器中都可以完美運行，並且易於實現。

然而，一個缺點是：您需要添加一個背景圖像（因此需要再添加一個請求，除非您對背景進行64位編碼 ）。

在具有“自動高度”的塊級元素上，無法將高度/最小高度設置為100％。