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

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

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

設置方法は

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

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

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

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

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

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

MITライセンスです。

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

スポンサードリンク

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

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

コメント

お初です。

＜?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

こんにちは。
大変利便性の高いライブラリのご提供まことに感謝いたします。
つきましては、ライセンスについて詳しく教えていただけないでしょうか？

投稿者:siro | 2010年9月 4日 01:57

＞siroさん

本ライブラリはMITライセンスで公開しております。

投稿者:西畑一馬 | 2010年9月 5日 12:28

素晴らしい

投稿者:匿名 | 2013年4月20日 09:26

おかげさまで簡単にできました！しかしCSS3で指定したグラデーションが途中で切れてしまいます。どうしたらいいでしょうか？

投稿者:大西 | 2013年5月 2日 11:29

いつも本当に有難うございます。
メインエリアの背景が途中で切れてしまったので、
改造して使用させていただきました。
要jQueryです。
もしかしたら大西様の問題もこれで解決するかもしれませんね。

＜を全角にしているのでお気をつけ下さい。
#headerWrapの部分をheaderのidに
#mainWrapの部分を、メインの部分のidに変更します。

30行目付近から

if(ft+fh＜wh){
//追記部分開始
var mainH = wh - fh - $('#headerWrap').height();
//追記終了
//記述変更
//document.getElementById(footerId).style.position = "relative";
//document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";
document.getElementById(footerId).style.top = (wh-fh-ft)+"px";
//追記部分開始
$('#mainWrap').css({height:mainH});
//追記終了
}

投稿者:さいとう | 2014年4月 8日 17:08