footerをウィンドウ下部に固定する『footerFixed.js』

HP登録でSEO対策！アクセスアップにコチラ！
検出率No.1・PC軽快さNo.1のウイルス対策ソフト

footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。

フッターをコンテンツの内容量にかかわらずwindow下部に表示さすためのjsラブラリになります。

CSS Nite in Osaka Vol.7でちょっと話題にあがったので作ってみました。

設置方法は

head要素なのでfooterFixed.jsを読み込みます。

<script type="text/javascript" src="./footerFixed.js"></script>

ウィンドウ下部に固定したい要素にid:footerを付けます。

これでその要素をウインドウの下部に表示さすことが可能になります。

(ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です。)

画面下部にフッター表示はめんどくさいですがCSSでも可能ですので、CSSが好きな方はこちらをお勧めします。

参考：画面下部にフッター表示

スポンサードリンク

日時: 2007年11月16日 01:22
css, javascript, jsライブラリ
javascript

«DOM 読み込み完了時に関数を実行する domready.js | メイン | 【Adobe Spry TIPS】目次»

このエントリーのトラックバックURL: http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/99

コメント

お初です。

＜?xml version="1.0" encoding="shift_jis"?＞

を記述しなければ固定なるのですが・・・
記述すると固定なりません･･･

記述した状態でも固定なるようにするにはどうしたらいいのでしょうか

投稿者:すももも | 2008年10月16日 15:22

フッター下の余白をなくしたくて色々調べてこのページにたどり着きました。
早速使わせて頂こうと思い実装してみたのですが、IE6だと何故か下に余白が出来てしまいます。

head内にjsのリンク先を記述し、フッター部分のcssは
#footer{
clear:both !important;
display:block;
height:40px;
margin:0;
padding:0;
bottom:0;
background:#000000 url(../images/foot_bg.jpg) repeat-x;
}
と指定しています。
cssの記述のせいでうまくいかないのでしょうか？

サンプルを拝見させて頂くとIE6でもきちんとフッターが下部にきているので
cssが邪魔をしているのかなぁ・・・としか考えられないのですが如何でしょうか。

アドバイスいただければ幸いです。
よろしくお願い致します。

投稿者:nuts | 2009年9月28日 19:16

>nutsさん

#footerを包んでいる要素かbody要素なんかに指定されているmarginやpaddingなんかが影響してしまってるかもしれません。
それらを変更して試してみてください。

投稿者:西畑一馬

| 2009年12月25日 06:51