category
サイト構築 -CSS

[CSS]クロスブラウザ、マルチカラム対応のフッタを下部に固定表示するスタイルシート

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

クロスブラウザ、マルチカラム対応のフッタを下部に固定表示するスタイルシートを紹介します。

デモのキャプチャ

New CSS Sticky Footer – 2009
demo

主な対応ブラウザは、IE6/7/8, Fx2/3, Op9.6/10, Safari3.2, Crome1となっており、他にも多くのブラウザに対応しています。
対応ブラウザリスト

New CSS Sticky Footerは、同じくフッタを下部に固定表示する「CSS Sticky Footer」の空divの使用を排除しHTMLをよりクリーンにし、マルチカラム対応にしたものとのことです。

仕組みはシンプルで、下記が最小の構成になります。

HTML

マルチカラムの場合は、「id="main"」のdivに配置します。

CSS: 1

フッタの高さが150pxのサンプルです。変更する場合は、3ヵ所数値を変更します。

CSS: 2

マルチカラム用のClearFixです。

Post on:2009年1月23日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

ぽたと
on 2009年1月23日

>主な対応ブラウザは、FX6/7/8, Fx2/3, Op9.6/10, >Safari3.2, Crome1となっており、他にも多くのブラウザに対応し
>ています。

FX6/7/8 → IE6/7/8

だとは思いますが、お知らせです。
いつも参考にさせてもらってます。これからも更新楽しみにしてます。

コリス
on 2009年1月23日

> ぽたと さん

ありがとうございます。
修正しました。

Tocki
on 2009年1月26日

Check out the Sticky Footer ++ on http://www.blog.tocki.de/2009-01-24/sticky-footer/

コリス
on 2009年1月26日

Thanks, Tocki :-)

hiro
on 2009年6月22日

大変参考になりました。ありがとうございました。

コリス
on 2009年6月22日

> hiro さん

お役に立てて、よかってです :-)

ページの先頭へ




© coliss

RSS