讓網頁中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操作。