css - 如何拉伸(stretch)一行 flexbox？

Question

我将引用这个例子:http://codepen.io/KenPowers/pen/CwoKc?editors=110

我想要的结果是(当屏幕宽度至少为 800 像素时)拉长中间的“行”，使页眉在顶部，页脚在底部。我想在不添加任何 HTML 标记的情况下执行此操作。

目前，示例呈现如下:

添加以下代码:

html, body {
  width: 100%;
  height: 100%;
}

结果如下:

最后，将 footer 和 header 的 max-height 设置为类似 50px 的结果如下:

我怎样才能使中间线拉伸(stretch)以填满页面上的所有空间？我觉得我已经尝试了所有可能的 align-content、align-items 和 align-self 组合，但都无济于事。

Answer 1

我想出了一个解决方案，希望对您有所帮助。

我使用了 css3 reset from HTML5 doctor (只有必须部分)，viewport-height unit vh 作为高度单位和跨浏览器 CSS 的等高列。

具有跨浏览器 CSS 信息的等高列来自此处:http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

您可以在此处查看和使用解决方案: http://jsbin.com/puvesila/1/edit

更新: 我试过没有包装器，但没有它们我无法实现。