html - 在不使用绝对定位的情况下，上面有可变高度内容的页脚？

Question

我有以下 ( http://jsfiddle.net/u2zedzob/1/ )

<div class="wrapper">
    <div class="main-content"></div>
    <div class="footer"></div>
</div>

*, *:before, *:after {
    box-sizing: border-box;
 }

.wrapper {
    background-color: red;
    height: 300px;
    width: 300px;
}

.main-content {
    height: 100%;
    width: 100%;
    background-color: green;
}

.footer {
    height: 30px;
    width: 100%;
    background-color: blue;
}

在这个例子中，.footer 被放置在 .main-content 之下，但是从 .wrapper 中分离出来。我希望 .main-content 在确定它的高度时尊重 .footer 的高度。

我不需要支持旧版浏览器。只是最新的 Chrome/FF。

我可以想出几种方法来实现这一目标。

• position: absolute, .footer { bottom: 0 }, .main-content { bottom: 30 }
• .main-content { height: calc(100% - 30px) }
• 可能会 display: table/display: table-cell 和一些其他问题？

我不喜欢 position: absolute 解决方案，因为这意味着如果我更改 .footer 的高度，我必须知道更新 .main-content< 的底部值。使用 calc 也是如此。我可以在我的 CSS 预处理器中存储一个变量来帮助解决这个问题，但它仍然感觉不对。

我以前在水平移动时的类似场景中成功使用表格单元格布局，但我似乎无法让 CSS 在垂直移动时很好地工作。

我想知道其他人会在这种情况下使用什么方法。谢谢

Answer 1

解决方案是使用 flexboxes:http://jsfiddle.net/u2zedzob/10/

*, *:before, *:after {
    box-sizing: border-box;
 }

.wrapper {
    background-color: red;
    height: 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
}

.main-content {
    height: 100%;
    width: 100%;
    background-color: green;
}

.footer {
    min-height: 30px;
    width: 100%;
    background-color: blue;
}