CSS Footer固定到底部

你想要怎么放置你的 Footer？

风雨不动稳如狗

固定在可视窗口最底部，页面滚动也仍然固定在最底部。

能屈能伸

页面内容高度不确定，希望 Footer 放置在页面内容的最下方。
我是一个demo

页面内容少，无法撑开，在可视窗口最底部

页面内容多，在页面最底部

怎么做

你想要风雨不动稳如狗，使用下列代码：

对于第二种能屈能伸的情况，你可以

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 -兼容性查询