footerをページの下部に固定

1.bodyの高さを少なくともスクリーン全体に満たし、bodyをfooterの絶対位置の参照ノードとして設定する.
2.main(footerの前の兄弟要素)のpadding-bottomの値がfooterのheight値以上であることを設定し、mainの内容がfooterに隠されずにすべて表示されることを保証する.
3.footer絶対位置決めを設定し、heightを固定高さ値に設定します.

    
header
    
content
    

html {
  height:100%;
}
body {
  min-height:100%;
  margin: 0;
  padding: 0;
  position: relative;
}
header {
  background-color: #000;
}
main {/* main padding-bottom       footer height  */
  padding-bottom: 100px;
  background-color: #333;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: #777;
}