Sticky footer

摘要：Sticky footer 设计：当页面内容不够长的时候，页脚块粘贴在视窗底部；若页面内容超出一屏时，页脚块会被内容向下推送而不会遮挡页面的内容

// html
<div id="container">
  <div id="main" class="clearfix">
    内容
  </div>
</div>
<div id="footer">
  页脚
</div>

// css
html,body {
  margin: 0;
  padding: 0;
  height: 100%; 
}
#container {
  min-height: 100%; 
}
#main {
  padding-bottom: 100px; /*等于footer的高度*/
}
#footer {
  position: relative;
  margin-top: -100px; /*等于footer的高度*/
  height: 100px;
  clear: both;
}
.clearfix:after{
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix{
  zoom:1
}

注意：
1.html,body要设置height:100%，div#container设置min-height:100%
2.div#container与div#footer是同级关系，如果需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位，否则会破坏div#container的min-height值
3.div#main的padding-bottom与div#footer的margin-top的负值需要与div#footer的高度一致
4.如果div#main中有浮动，一定要清除浮动（div#main和div#footer都需要clear:both消除浮动对自己的影响）

W3CPLUS:如何将页脚固定在页面底部