使用css让Footer 保持在页面底部的方法

使用css让Footer 保持在页面底部的方法

如题这次要讨论的是使用css方法，当然也可以通过js实现需求，虽然这里不做讨论，但也欢迎大神评论指点~
本次方法源自《How to keep footers at the bottom of the page》

“Footer” 顾名思义，当然就是要在最下面的部分，但是，在开发时不知道有多少同学注意到这个问题，就是当页面内容太少时，可能会出现footer下方还有一部分空白部分。这也是博主最近学习过程中遇到的问题。通过查找资料，这个问题得到了解决，于是便记录下来。
先上两张图：

当container中的内容很少，不够填满整个div时，footer紧连着container下方

当container中的内容很少，不够填满整个div时，footer依然保持在底部

从图中便看出，不作处理的话，页面内容很少时，footer下会留有很多空白处
接下来就来看看如何用css对页面做出处理

/*css*/
html,body {
  margin:0;
  padding:0;
  height:100%;
  color: #000;
}
#wrapper {
  min-height:100%;
  position:relative;
}
#header {
  background:#ff0;
  padding:10px;
}
#container {
  padding:10px;
  padding-bottom:60px;
}
#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
  background:#6cf;
}

  <!-- html -->
 <div id="wrapper">
   <div id="header">header</div>
   <div id="container">container</div>
   <div id="footer">footer</div>
 </div>

首先需要在header，container，footer外添加一个盒子#wrapper把他们包住，
然后要将#wrapper设置样式 min-height:100%; position:relative;
再通过给#footer设置position:absolute;bottom:0;
这样#footer就会保持在页面的最下方。

原文出处Roy'Blog：《使用css让Footer 保持在页面底部的方法》

感谢阅读