フッターをウィンドウ下部に固定する2つの方法

  • 公開日:2013/6/17
この記事は最終更新日から8年以上が経過しています。

想定よりもコンテンツの内容量が少なくなったページでフッターが上に浮いてきてしまって、フッターの下に隙間が出来て不格好・・・この隙間をなくして、フッターをウィンドウ下部に固定する方法を備忘録も兼ねて2つご紹介します。


1.cssでpositionを使って固定する

【HTML】

<html lang="ja">
     <body>
          <div id="wrapper">
               <header>ここにヘッダーが入ります</header>
               <div id="contents">ここがコンテンツです</div>
               <footer id="footer">ここにフッターが入ります</footer>
          </div><!--  wrap  -->
     </body>
</html>

【CSS】

html, body {
     height: 100%;                    /* ブラウザ領域分確保 */
}
#wrapper {
     width: 100%;
     position: relative;
     height: auto !important;     /* IE6対策 */
     height: 100%;                    /* IE6対策 */
     min-heigth: 100%
}
#contents {
     padding-bottom: 140px;     /* フッターの高さと同じにする */
}
#footer {
     height: 140px;
     position: absolute;
     bottom: 0;
}

html要素とbody要素の高さを100%にしてブラウザ領域(ブラウザで表示される)分確保します。コンテンツ内容量がこれを超える場合でも自動で伸びていくので大丈夫です。
そして、#wrapperにposition: relativeをセットして、内包されている#footerにはposition:absoluteとbottom:0でウィンドウ下部に固定しています。
また、コンテンツとフッターが被らないように、フッターと同じ高さ分だけ#contentsにpadding-bottomを指定しています。

2.JavaScriptを使って固定する

フッターをコンテンツの内容量にかかわらずウィンドウ下部に固定表示するためのjsライブラリ『footerFixed.js』を使用する方法です。
任意の場所にfooterFixed.jsを配置して、head内でfooterFixed.jsを読み込みます。
ウィンドウ下部に固定したいフッター部分にid=”footer”を指定するだけです。

<script type="text/javascript" src="js/footerFixed.js"></script>
<div id="footer">
     <!-- ここにフッターの記述 -->
</div>

footerFixed.jsは必要な記述が少なく、フッターを固定するjsの中でも特におすすめです。
ちなみに、footerFixed.jsはMITライセンスです。ありがたや。

参考サイト

footerをウィンドウ下部に固定する『footerFixed.js』- to-R