CSSでフッターをページ最下部にくっつけて固定する方法

ヘッダー、コンテンツ、フッターとHTMLを順にコーディングしただけだと、コンテンツの行数が少ないとフッターがコンテンツのすぐ下にくっついてしまい、画面下部に余白ができてしまいます。

See the Pen WWQxbE by natsuki (@natsukimemo) on CodePen.

CSSでフッターを画面の最下部に固定する

CSSでコンテンツの行数にかかわらず、フッターを画面の最下部に固定する方法です。

See the Pen pBjbjL by natsuki (@natsukimemo) on CodePen.

手順は下記の3つです。

フッターを最下部に固定する方法

  1. bodyタグの直後にdiv.wrapで全ての要素を囲う。
    (クラス名は好きなものでOK。)
  2. div.wrapにposition: relativeを指定する。
  3. footerに、position:absolute;とbottom:0;を指定する。

コードは下記です。

<body>
<div id="wrap">
<header>ヘッダー</header>
<div id="contents">
        コンテンツに
    <br>フッターがくっついてきません。
    <br>画面の下部で固定されています。
</div><!--#contents-->
<footer>フッター</footer>
</div><!--#wrap-->
</body>

上記htmlの2行目と10行目、bodyタグの中の要素を全てdiv.wrapの入れ子にします。

CSSは下記になります。
※1行目~4行目は、ページの上下にできる余白を削除するCSSです。この記事の趣旨とそれるものなので詳しくはふれません。

*{
margin:0;
padding:0;
}
html,body{
     height:100%;
 }
div#wrap{
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
header{
    background-color:#F0E68C;
}
div#contents{
    background-color:#efefef;   
    padding-bottom:30px;
}
footer{
    position:absolute;
    bottom:0;
    background-color:#ff0000;
    width:100%;
    height:30px;
}

5行目~6行目: htmlとbodyタグにheight:100%を指定します。

8行目~13行目: divタグid名wrapにpositionとmin-heightを指定します。heightはIE6対策に指定しています。

21行目~27行目: footerにpositionとbottom:0を指定します。
heightやwidthは、指定しないとfooter要素内のテキストの幅になります。

前後しますが、17行目~20行目: コンテンツ(idがcontentsのdivタグ要素)にフッターの高さと同じだけpadding-bottomを指定しておくとコンテンツとフッターが被らなく なります。

CSS以外の方法

CSSで固定する他にjsライブラリ『footerFixed.js』というものがあって、とても良いものだそうです。

to-Rさんのブログにリンクされています。【footerをウィンドウ下部に固定する 『footerFixed.js』】