• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

よく忘れるのでメモ。

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

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 でフッター要素をページ下部に固定する方法の記事も合わせて参考にしてみてください。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください