如何通过css来实现紧贴底部的页脚
在网页设计时存在一个非常常见的问题：一个块级样式的页脚，常常设置了特定的背景，当页面内容足够长的时候它一切正常。而当页面内容比较短的时候就会出现问题。此时的问题就是页脚不能像期望中的那样“贴紧”视口的最底部，而是紧跟在内容的下方。（悬在页面中间）。
问题的关键是页面内容的高度是动态的，不同页面高度是不一样的。通过js来计算解决不是我们期望的。在css3之前都咩有很好的解决方案。大部分解决方案都是给页脚设计一个固定的高度，然后计算来实现。当页脚内容改变时，计算也要响应修改，显然这不是健壮的。（不过好在页脚的内容往往很少改动）。
CSS3之前的解决方案，网上有很多讨论。
CSS3中的解决方法：
方法一：固定高度的解决方法。
假设页面机构比较简单，main部分和固定高度为8em的页脚部分。main部分的高度根据内容动态变化。这种情况下只需要设置main块的最小高度就可以了。
main{
min-height: calc(100vh - 8em);
box-sizing:border-box;
}
这种方式要求页脚内的文本不会由于设备或窗口的大小变化而导致文本换行。另外如果我们需要改变这个页脚固定高度时，也要相应地修改这里的min-height计算。这种设计是不DRY的。
方法二：基于flexbox的灵活解决方法。
flexbox方法不需要复杂的计算。只需要设置body为display:flex并flex-flow:column后，再给main这个flex item设置flex:1；就可以实现这个效果了。
body{
display:flex;
flex-flow:column;
min-height:100vh;
}
main{
flex:1;
}
可以参考 play.csssecrets.io/sticky-footer
关于flex的参考文档：
阮一峰 de Flex 布局教程：语法篇: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html