我正在尝试使用高度相等的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拉伸(stretch)以适应其高度。
阅读this article之后,我期望在min-height: 100%上设置.span10会使它拉伸(stretch)到最大高度,但是不会:

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

这是为什么?有什么解决方案可以使.span10扩展到其父级高度,而无需设置固定高度,以保持此设计的灵活性?

最佳答案

试试这个:

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

请注意,我添加了display:tabledisplay: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;
}

关于html - 使两列相同的高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12375692/

10-14 15:25
查看更多