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

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

デモのキャプチャ

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です。

sponsors

top of page

©2018 coliss