ページの内容が少なくてもフッタを下部に配置する

いつも忘れるのでメモ。

footerをdiv#wrapperの外に出す。

<div id="wrapper">
  <div id="main"></div>
</div>  <!-- /wrapper -->
<div id="footer"><div>

CSS

html, body {
  height: 100%;
}

body > div#wrapper {
  min-height: 100%;
}

body > div#main {
  overflow: auto;
  padding-bottom: 100px;  /* footerの高さを指定する*/
}

div#footer {
  position: relative;
  margin-top: -100px;  /* footerの高さの負の値を指定する */
  height: 100px;
  clear: both;
}

IEへの対応として、以下のスタイルをHTMLに追加する。

<!-- [if !IE 7] -->
  <style type="text/css">
   body > div#wrapper {
     display: table;
   }
   </style>
<!-- [endif] -->