核心提示：一、什么是sticky footer？作为一名前端coder，如果有人问你什么是sticky footer时，你一脸懵逼的样子，可是要被鄙视的哟其实，在日常开发中，你一定遇见过这样的布局，只是不知道它...
一、什么是sticky footer？
作为一名前端coder，如果有人问你什么是sticky footer时，你一脸懵逼的样子，可是要被鄙视的哟……
其实，在日常开发中，你一定遇见过这样的布局，只是不知道它的名字罢了。当然，知道这个英文，偶尔也是不错的呢！
sticky footer 指的是在页面布局时，当页面的内容不足或等于一屏时，让页脚始终保持在页面的底部，如同粘在底部一样(^-^)；当页面的内容超过一屏时，即页面发生滚动时，页脚跟随文档，仍然处在页面文档的底部。
二、基本布局
HTML部分
<p class="content">这是页面的主体部分</p> <p class="footer">这是页脚</footer>
CSS部分
.content{
background-color: #f5f5f5;
}
.footer{
background-color: #00ffff;
}
三、具体实现
（1）给内容部分设置最小高度
.content{
min-height: calc(100vh-footer的高度);
box-sizing:border-box;
}
该方法：当页脚的高度不定时，这种方法就显得有点不灵活了；
（2）弹性盒布局：footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer{
flex: 0;
}
该方法：弹性盒布局，如果对兼容性要求不高，比较推荐。
（3）在.content 元素的外面添加一个父容器.wrapper；
HTML部分
<body>
<p class="wrapper">
<p class="content"></p>
</p>
<p class="footer"></p>
</body>
CSS部分
html, body, .wrapper {
height: 100%;
}
body > .wrapper {
height: auto;
min-height: 100%;
}
.content {
padding-bottom: 200px; /* 和footer相同的高度 */
}
.footer {
position: relative;
margin-top: -200px; /* footer高度的负值 */
height: 200px;
clear:both;
}
另外，为了保证兼容性，需要在.wrapper上添加.clearfix类；
<body>
<p class="wrapper clearfix">
<p class="content"></p>
</p>
<p class="footer"></p>
</body>
CSS部分
.clearfix{
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
该方法：这种负margin的布局方式，是兼容性最佳的布局方案，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，结构相对较复杂，代码较多；
