CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック

2009/1/24 12:22

ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 | CREAMUで紹介されていたNew CSS Sticky Footer – 2009がなかなか便利そうだったので、どんなテクニックを用いているのか調べてみました。

HTMLタグはたとえば次のような構造です。

↑ #mainを#wrapで包み、#wrapと#footerが同階層にあります。

これにCSSを適用すると、次のようなレイアウトになるようです。

↑ #mainの下部にpaddingをフッターの高さと同じだけ確保し、同じ値で#footerの上部にネガティブマージンをとっているようです。

ページの最下部にフッターを固定する方法はいくつかあると思いますし、自分でも試行錯誤してやっていますが、一つ便利な方法を知っておくと役立つかと思います。

clearfixなど、完全なCSSとサンプルはNew CSS Sticky Footer – 2009より取得してください。

Webエンジニアやってます。最近はドットインストールの開発がお仕事です。その傍ら、個人で Meity や電車遅延なう、梅酒.in、 #グラドル自画撮り部の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。