概要

タイトルまんまです。

感想

コピーライトの表記などをフッターに配置したりするけど、これを画面最下部に固定する方法を改めて調べた所、このサイトがシンプルで分かりやすかったです。
他にも調べたサイトはあったけど上手く行かなかったのですが、ここの方法はすんなり行きました。

サンプル

申し訳ないですが、サンプルはそのままを使わせてもらいます。

        <div id="wrap">
             <header>ヘッダー</header>
             <div id="contents">コンテンツ</div>

             <footer id="footer">フッター</footer>
        </div>

※参考サイトのIE6対策は今ではもう必要ないので省いてます。

html,body{
     height: 100%;
}
#wrap{
     width: 100%;
     position: relative;
     min-height: 100%;
}
#contents{
     padding-bottom: 140px;  /* フッターの高さと同じ */
}
#footer{
    height: 140px;
    position: absolute;
    bottom: 0;
}

参考資料

隙間を埋める！フッターをウィンドウ下部に固定する3つの方法 | 株式会社LIG