CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

フッターを固定にしたサンプルの解説

今回固定する部分はココになります。

XHTML

<script type="text/javascript" src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/fixed.js"></script>

Cyokodog::Diaryのcyokodogさんが使ったスクリプトをhead内に読み込ませます。

<div id="footer">
<div class="inner">
<address>Copyright (c) 2009 <a href="http://www.css-lecture.com" title="CSS Lecture">CSS Lecture</a> All rights reserved.</address>
</div>
<!--/ #footer--></div>

htmlは普通の記述で大丈夫です。

Javascript

jQuery(function($j){
	$j('#footer').positionFixed()
})

fixed.jsの最後にposition: fixedを使い部分に指定。

CSS

html, body	{
	_height: 100%;   
	_overflow: auto;  
}

body要素、html要素に上記ソースを記述しておきます。

/* footer要素
----------------------------------------------------------- */
div#footer	{
	width: 100%;
	background: #000 url(../image/bg/footer.jpg) repeat-x;
	color: #FFF;
	position: fixed;
	bottom:0;
	left:0;
}

CSSは特に変った指定はしていません。

※XML宣言を省いた(標準モード)時のみ有効となります。

2/14追記

cyokodogさんからスクロールバーの表示が変とのご指摘を受けIE6には完璧には対応出来ていない事が分かりました...
ガタつきはありますが、サンプルの方まで作って頂きましたので紹介させて貰っておきます。

http://cyokodog.web.fc2.com/cyokolab/example/fixed_position_ex0207.html