: サイト構築 -CSS

[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に配置します。

<div id="wrap">
<div id="main" class="clearfix">
	</div>
</div>
<div id="footer">
</div>

CSS: 1

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

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* must be same height as the footer */
#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;}

CSS: 2

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

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Post on:2009年1月23日