フッターの位置をウインドウの下に固定する方法（CSS）

ホームページのフッターの位置を常にウインドウの下に固定して、内容が少ないページでもフッターは一番下に表示される方法です。

HTMLソースは次のようにします。

<div id="wrap">
<div id="main">
              main の内容が入ります。
</div>
</div>    <!-- wrap の中に footerを入れ子にしないこと-->
<div id="footer">
   footer の内容が入ります。
</div>


CSSの設定は次のようにします。


html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
padding-bottom: 150px;}  /* ←フッターの高さと同じにすること */

#footer {position: relative;
margin-top: -150px;   /* ←フッターの高さと同じネガティブマージンを設定 */
height: 150px;
clear:both;}

参考サイト　http://www.cssstickyfooter.com/