[CSS]CSSでフッター要素をブラウザ下部に固定する方法

CSS

2013.01.17

コンテンツの情報量が少ないページでは、フッター要素がページ中段くらいまで上がってきて見栄えが良くない場合もあるので、フッターは常にブラウザの下部に固定させる方法をまとめました。

CSS でフッター要素をブラウザの下部に固定
1. body、htmlのheight:の値について
2. #containerのheight:の値について
#contentsと#footerの値の調整
1. jQueryでフッターを固定させる方法もあり

CSS でフッター要素をブラウザの下部に固定

まずはHTMLです。

<body>
<div id="container">
    <div id="contents">コンテンツ</div>
    <div id="footer">フッター</div>
</div>
</body>

<body>

<div id="contents">コンテンツ</div>

</div>

</body>

続いてCSSの記述例です。

body,html { /*ページ全体*/
    height: 100%;
}
 
#container { /*親要素*/
    position: relative;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
 
#contents { /*コンテンツ*/
    padding-bottom: 50px;
}
 
#footer { /*フッター*/
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
}

body,html { /*ページ全体*/

height: 100%;

}

#container { /*親要素*/

position: relative;

width: 100%;

min-height: 100%;

height: auto !important;

height: 100%;

}

#contents { /*コンテンツ*/

padding-bottom: 50px;

}

#footer { /*フッター*/

position: absolute;

width: 100%;

height: 50px;

bottom: 0;

}

以下、簡単な解説です。

body、htmlのheight:の値について

body、html共にheight:100%を指定します。

#containerのheight:の値について

#containerで指定している高さですが、IE6用の補正が入っています。

min-height:100%>でブラウザの高さいっぱいを使っているのですが、IE6ではmin-heightが利用できません。

その下のheight:auto !importantでautoを最優先させているのですが、これもIE6ではバグ？？の影響か、height:autoではなく、その下のheight:100%が適用されるようになります。

つまりIE6の場合は

#container {
    height: 100%;
}

#container {

height: 100%;

}

が適用されていることになります。

IE6以外のブラウザでは、

#container {
    min-height: 100%;
    height:auto !important
}

#container {

min-height: 100%;

height:auto !important

}

が適用されています。

#contentsと#footerの値の調整

#footerの高さの分だけ#contentsの下余白を50px空けています。

※この値はデザインに合わせて変更願います。

これで#contents内の情報が多いページの時に、#footer要素と重なり合うことを回避します。

jQueryでフッターを固定させる方法もあり

なお、フッター要素をページ下部に固定させる方法はjQueryを使った方法もありますので、[JS]jQuery でフッター要素をページ下部に固定する方法の記事も合わせて参考にしてみてください。