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

サイト構築 -CSS

Post on:2009年1月23日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

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

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

<textarea name="code" class="html" cols="60" rows="5">
<div id="wrap">
	<div id="main" class="clearfix">
	</div>
</div>
<div id="footer">
</div>
</textarea>

</div>

</div>

</textarea>

CSS: 1

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

<textarea name="code" class="css" cols="60" rows="5">
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;}
</textarea>

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;}

</textarea>

CSS: 2

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

<textarea name="code" class="css" cols="60" rows="5">
.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 */
</textarea>