使用css让Footer 保持在页面底部的方法
如题这次要讨论的是使用css方法，当然也可以通过js实现需求，虽然这里不做讨论，但也欢迎大神评论指点~
本次方法源自《How to keep footers at the bottom of the page》
“Footer” 顾名思义，当然就是要在最下面的部分，但是，在开发时不知道有多少同学注意到这个问题，就是当页面内容太少时，可能会出现footer下方还有一部分空白部分。这也是博主最近学习过程中遇到的问题。通过查找资料，这个问题得到了解决，于是便记录下来。
先上两张图：
当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 保持在页面底部的方法》
感谢阅读
