ネットサービスの開発に役立ちそうな話題を中心にお届けします。
F.Ko-Jiの「一秒後は未来」 > 豆知識 > CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック
2009年01月24日 12:22
1110日前に投稿

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

  • ... PV
  • このエントリーをはてなブックマークに追加

スポンサード リンク

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

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

cssstickyfooter.gif

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

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

cssstickyfooter-1.gif

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

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

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

スポンサード リンク

Written by
関連エントリーはこちら
お探しの情報が見つからない場合はサイト内検索もお試しください。
Meity.jp - Twitterなかまでプライベートなオフ会を開催したいなら


トラックバック

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

豆知識

English version

2009/01/24 12:22:07 by F.Ko-Ji
コメント (0) トラックバック (0) 豆知識

前のエントリー: « DailyFeed復旧しました。。
次のエントリー: このブログの日別アクセスランキング »

コピペにご利用ください。

タイトル:

URL:

リンク用HTMLタグ: