[CSS]CSS でフッター要素をブラウザ下部に固定する方法｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

よく忘れるのでメモ。

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

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

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

まずはHTMLです。

<body>
<div id="container">
    <div id="contents">コンテンツ</div>
    <div id="footer">フッター</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: の値について

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%;
}

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

IE6 以外のブラウザでは、

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

が適用されています。

#contents と #footer の値の調整

#footer の高さの分だけ、#contents の下余白を 50px 空けています。
※この値はデザインに合わせて変更願います。

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

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

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

スポンサード