在手机端使用上中下布局，而中间部分的内容决定底部布局的位置。
当中间内容较少的时候，底部在页面的最底部，而不是跟随页面的文档流；
当中间内容较多时，底部在内容的下面，滚动页面方可见到。
sticky-footer的解决方案
第一种 负margin布局方式
html
<div class="wrapper clearfix">
<div class="content">
// 这里是页面内容
</div>
</div>
<div class="footer">
// 这里是footer的内容
</div>css
.wrapper {
min-height: 100%;
}
.wrapper .content{
padding-bottom: 50px; /* footer区块的高度 */
}
.footer {
position: relative;
margin-top: -50px; /* 使footer区块正好处于content的padding-bottom位置 */
height: 50px;
clear: both;
}
.clearfix::after {
display: block;
content: ".";
height: 0;
clear: both;
visibility: hidden;
}注释：content元素的padding-bottom、footer元素的高度以及footer元素的margin-top值必须要保持一致。
这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。（原文）
第二种 flex布局方式
这种布局方式结构简单，代码量少，也是较为推荐的布局方式。（原文）
html
<div class="wrapper">
<div class="content">这里是主要内容</div>
<div class="footer">这是页脚区块</div>
</div>css
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
flex: 0;
}第三种 页面最小高度
这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。
从而这个问题就解决了，但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。（原文）
html
<body>
<div class="content"></div>
<div class="footer"></div>
</body>css
.content{
min-height:calc(100vh-footer的高度);
box-sizing:border-box;
} 
