F.Ko-Jiの「一秒後は未来」ではウェブやSEO、API、RSSといった技術的ネタから、ちょっとした豆知識や梅酒、エンタメ系まで様々な情報を不定期にお届けしています。

F.Ko-Jiの「一秒後は未来」 > 豆知識 > CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック

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

2009/01/24 12:22:07

ブラウザの下部にフッターを固定表示する『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より取得してください。

[2010-01-12] RSS フィードの URL が変わりました。お手数ですが RSS リーダーへの再登録をお願いします。

このエントリーのトラックバックURL:

タイトル:

URL:

リンク用HTMLタグ:
<a href="http://blog.fkoji.com/2009/01241222.html">CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック - F.Ko-Jiの「一秒後は未来」</a>

Agile Media Network

F.Ko-Jiの「一秒後は未来」