css - 2 列布局，列高与页脚一致

Question

我有一个基本布局，其中包含 2 列和一个页脚，该页脚的行为取决于哪一列的高度较长。

<div id="holder">
    <nav class="navbar navbar-default navbar-fixed-top"></nav>

    <div class="container">
        <div class="row">
            <div class="left col-md-8">
                Extends with content
            </div>
            <div class="right col-md-4">
                Extends with content
            </div>
        </div>
    </div>

    <div class="footer">
        Relative behaviour when the content of either columns is long enough. Sticks to the bottom when there is not enough content. 
    </div>

带有 CSS 的完整代码:http://jsfiddle.net/TNRqL/

有什么优雅的解决方案可以使列具有相同的高度，但也贴在页脚上？

如:http://jsfiddle.net/xJ6Cv/ (我在左列和右列上使用了最小高度)

我在另一个问题中找到了一个解决方案，可以使列的高度相同，而不管哪个列更长，但不会使它们粘在页脚上。

.row {
    overflow: hidden;
}

[class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Answer 1

如果您同意 around 80% browser support , 然后你可以用 Flexbox CSS3 module 优雅地做到这一点.您将整个页面定义为具有最小高度，然后将您的列标记为“灵活”以填充可用空间。有 a demo here ，尽管由于元素的嵌套，它不会那么简单。