当你面临这样的问题：有一个具有块级样式的页脚（比如它设置了背景或阴影），当页面内容足够长时它一切正常，当页面较短时（比如错误信息页面）就会出现问题。此时的问题在于，页脚不能像我们期望中那样“紧贴”在视口的底部，而是紧跟在内容的下方：
<html>结构
<main>
<h1>
来自马格南前主席的终极摄影指南
</h1>
<p>
哪怕你从没···/*段落文字*/
</p>
</main>
<footer>
<p>
【这是页脚】“要是你想成为一位靠谱的摄影师,
</p>
<p>
本质上唯一重要的事情就是要具有视觉的触感——其余都是后天可以学来的。”
</p>
</footer>
页脚紧跟着内容
假设这个页脚的文本永远不可能折行，那我们就可以推算出它实际所占的高度：
2行 x 行高 + 3 x 段落的垂直外边距 + 页脚的垂直内边距 = 2行 x 1.5em + 3 x 1em + 2 x 1em = 8em
接下来借助视口的长度单位以及 calc（）函数，就可以把页脚“固定”到底部：
main {
min-height:calc(100vh -8em);
box-sizing:border-box;
}
这个方法是有效的，而且似乎要比那些需要固定高度的方案要稍微好一些。不过如果页面布局不是这么简单的话，那这个方法就完全不实用了。（它要求我们页脚文本永远不会折行，而且每当我们改变页脚的尺寸时，都需要跟着调整 min-height 值。）
更灵活的解决方案 Flexbox 对于此类问题是完美的选择：
首先对<body> 元素设置 display：flex； 因为它是这两个主要区块的父元素，当父元素获得这个属性之后，就可以对其子元素触发“伸缩盒布局模型”。 然后还需要把 flex-flow设置为column，否则子元素会被水平排放在一行上：
没有设置 flex-flow:column
但是当我设置了flex-flow:column 之后，画面看起来还是与没设置 flexbox 的时候一样-页脚紧贴着内容：
body {
display:flex;
flex-flow:column
}
这是因为所有元素都占据了整个视口的宽度，而他们的高度也都是由其自身的内容来决定的。因此我们需要把 <body> 的 min-height 属性指定为 100vh，这样它级至少会占据整个视口的高度。
body {
display:flex;
flex-flow:column;
min-height:100vh;
}
不过此时，画面效果仍然没有变化。原因在于，我们已经为整个 body 元素指定了最小高度，但各个子元素的高度仍然是以各自的内容为准的（它们的高度仍然由内部因素决定）。
此时我们期望的是，页头和页脚的高度以其内部因素决定，而内容区块的高度应该可以自动伸展占满所有可用空间。只要给<main>这个容器的 flex 属性指定一个大于0的值（比如1即可）：
body {
display:flex;
flex-flow:column;
min-height:100vh;
}
main {
flex:1;
}
页脚终于乖乖的沉到底部了
参考书籍：Lea Verou《CSS揭秘》
