让网页中footer总在底部的有效办法

DOM结构：

html
　body
　　#wrap
　　　#header
　　　#main
　　#footer-spacer
　　#footer

其中，主要内容放在#wrap中。#footer-spacer是为了占位的透明元素。

设置css：

html,body{
  min-height: 100vh;
  overflow: auto;
  padding: 0;
  margin: 0;
  birder: 0;
}    
body{
  position: relative;
}
#footer{
  height: 50px; /*footer高度，自己设置*/
  width: 100%;
  position: absolute;
  bottom: 0;
}
#footer-spacer{
  height: 50px; /*和footer高度一致*/
  margin-top: 20px; /*据主体高度，自己设置*/  
}

原理是保持footer始终在body底部。body设置为跟随内容变换高度，同时最小高度为一屏。footer浮动后的位置由footer-spacer填充。

*如此设置后，要操作主页面overflow开闭，只能对html操作。