html - 使两列高度相同

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 是两列中最高的，所以它使 .row-fluid 拉伸(stretch)以适应它的高度。看完this article ，我期望在 .span10 上设置 min-height: 100% 会使其拉伸(stretch)到全高，但它不会:

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

这是为什么呢？是否有任何解决方案可以使 .span10 拉伸(stretch)到其父级高度，避免设置固定高度，以保持此设计的灵 active ？

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;
}