CSS秘密花园： Sticky footers_html/css_WEB-ITnose

#wrapper {    min-height: calc(100vh - 7em);}

这似乎略优于现有的固定高度的解决方案，主要是由于其简单。然而，除了简单的布局，但这是不切合实际。它要求我们每次都要计算包裹页脚文本容器的高度，这样我们需要每次计算容器的 min-height 。除非我们愿意添加HTML容器来包裹我们的标题和内容，不过同意也要计算。当然，在这个时代，我们可以做得更好，对吗？

Flexbox解决方案

解决这类问题，Flexbox是最完美的方案。我们只需要几行CSS代码就可以完美的实现，而且不需要一些奇怪的计算或添加额外的HTML元素。首先，我们需要在 元素上设置 display:flex 。如果父元素( )的三个块元素，使用Flexbox切换布局，还需要设置 flex-flow:column ，否则这三个块会排成一行。如下图所示：

body {    display: flex;    flex-flow: column;}

在这一点上，我们的页面看起来和之前一样，因为每个元素所占视窗高度是由其内容决定。如此一来，我们可以说还没有真正的利用上Flexbox。

从实际出发，需要给 设置 min-height 值为 100vh ，让 内容不足视窗高度时也能占据整个视窗。虽然这样做了，效果看起来，还是如下图所示：

即使给 指定了最小高度，但每个盒子的高度仍取决于其内容大小。

这里我们需要在页头和页脚设置高度，但其内容的高度自动伸缩的来适配剩余空间。我们可以在

body {    display: flex;    flex-flow: column;    min-height: 100vh;}main { flex: 1; }