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/（我在左右列上使用了min-height）

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

.row {
    overflow: hidden;
}

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

Answer 1

如果您对around 80% browser support感到满意，那么您可以使用Flexbox CSS3 module优雅地执行此操作。您将整个页面定义为具有最小高度，然后将列标记为＆＃34; flexing＆＃34;填补可用空间。那里有a demo here，但是由于你的元素的嵌套，它不会那么简单。

2列布局，列高度贴在页脚上

1 个答案: