你想要怎么放置你的 Footer？
风雨不动稳如狗
固定在可视窗口最底部，页面滚动也仍然固定在最底部。
能屈能伸
页面内容高度不确定，希望 Footer 放置在页面内容的最下方。
我是一个demo
页面内容少，无法撑开，在可视窗口最底部
页面内容少
页面内容多，在页面最底部
页面内容多
怎么做
你想要风雨不动稳如狗，使用下列代码：
image
对于第二种能屈能伸的情况，你可以
1. 设置min-height
<div class="wrapper">
</div>
<footer class="footer">
<p>© 2015 深圳波纹聚联网络科技有限公司</p>
<a href="http://www.miitbeian.gov.cn/">粤ICP备15111480号-1</a>
</footer>
html, body {
height: 100%;
}
.wrapper{
min-height: calc(100% - 58px); /*58px为footer的高度+margin*/
}
.footer{
height:58px;
}
2. .main[padding-bottom] 写法
<div class="wrapper">
<div class="main" id="main"></div>
</div>
<footer class="footer">
<p>© 2015 深圳波纹聚联网络科技有限公司</p>
<a href="http://www.miitbeian.gov.cn/">粤ICP备15111480号-1</a>
</footer>
/*margin 写法*/
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -58px;
}
.main{
padding-bottom: 58px;
}
3.wrapper：after写法
<div class="wrapper">
<div class="main" id="main"></div>
</div>
<footer class="footer">
<p>© 2015 深圳波纹聚联网络科技有限公司</p>
<a href="http://www.miitbeian.gov.cn/">粤ICP备15111480号-1</a>
</footer>
/*after 写法*/
html, body {
height: 100%;
}
.wrapper{
min-height: 100%;
margin-bottom: -58px;
}
.wrapper:after {
content: "";
display: block;
}
.footer, .wrapper:after {
height: 58px;
}
4. flex布局
<div class="main" id="main"></div>
<footer class="footer">
<p>© 2015 深圳波纹聚联网络科技有限公司</p>
<a href="http://www.miitbeian.gov.cn/">粤ICP备15111480号-1</a>
</footer>
/*flex写法*/
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
}
注意：vh兼容性表，兼容性还不错，只是安卓4.3以下都不兼容。
红色为不兼容 黄色为部分兼容 绿色为兼容
综上，如果内容多的话，不去捣鼓footer也行，当内容不确定的时候，上面方法可以一直保持在页面内容的最底部。
参考资料
- 设置after （Sticky Footer 此插件实现原理）
- 用CSS固定footer在底部的疑问?
- 网页中的底部foot一般是如何定位的？
- caniuse -兼容性查询
