フッタをページ下端に固定する方法

css

下端固定フッタ(Sticky Footer)を実現する方法、調べたところいくつかの方法がある模様。


■main pushing method
mainを引き伸ばすためのdivを追加する方法。
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

<div id="main">
  <div id="push"></div>
</div>
<div id="footer"></div>


■main overflow method
pushする方法に似たものらしい。替りにoverflowを使う？
http://www.cssstickyfooter.com/using-sticky-footer-code.html


■main containing method
全てを含んだcontainerのheight（html, bodyも）を100%にして、position:absoluteを使ってページのbottomに配置。
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
http://www.alistapart.com/articles/footers/

<div id="container" style="position:relative">
  <div id="header"></div>
  <div id="footer" style="position:absolute; bottom:0"></div>
</div>