如何拉伸一行flexbox？

Question

我将参考这个例子：http://codepen.io/KenPowers/pen/CwoKc?editors=110

我想要的结果是（当屏幕宽度至少为800px时）伸展中间＆＃34;行＆＃34;这样标题位于顶部，页脚位于底部。我想这样做而不添加任何HTML标记。

目前，该示例呈现如下：

添加以下代码：

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

结果如下：

最后，将max-height和footer的{​​{1}}设置为类似header的内容会产生以下结果：

我怎样才能使中间线延伸以填充页面上的所有空间？我觉得我已尝试过50px，align-content和align-items的所有可能组合，但无济于事。

Answer 1

我有一个解决方案，我认为＆amp;希望对你有所帮助。

我使用css3 reset from HTML5 doctor（仅限部分），视口高度单位vh作为高度单位，使用跨浏览器CSS的等高列。

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

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

更新： 我试过没有包装，但没有它我就无法实现。