使两列高度相同

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 拉伸以适应其高度。 在阅读了this article 之后，我期待在.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

古老的经典是faux columns 技术。在每个浏览器中都能完美运行，并且易于实现。

但是有一个缺点：您需要添加背景图片（因此需要再添加一个请求，除非您的背景是 base 64 encoding）。

对于具有“自动高度”的块级元素，无法将高度/最小高度设置为 100%。