Qitailang's HP > webtech

JavaScriptでフッターを表示領域最下部に配置する

2014/07/27

CSSで実装

ページ内容が少ないとき、フッタが上の方に浮き上がって下に余白ができ、据わりが悪くなることがある。

CSSを使ってフッターをウィンドウの最下部に表示する方法があるようで、Sticky Footer、べとつく飴のように(windowの下縁に)くっつく、と言うそうだ。

理屈としては、bodyとかcontent(container,wrapperなどというブロック名が使われることも多い)などウィンドウ全体に収まるべき要素の高さを100%とする。するとfooter部分だけ画面の下にはみ出すので、その分フッタの位置を上にずらすことで実装できるようである。

JavaScriptで簡単実装

ところがそんな面倒なCSSを定義しなくてもfooterFixed.jsという便利なjsライブラリがあることを知った。以下のようにJavaScriptを読み込み、フッタのidをfooterとしておくだけでよい。

<script type = "text/javascript" src = "js/footerFixed.js">   //<body>直前に記述
<div id="footer">フッタ内容</div>
sample

なお、作者のサイトからダウンロードしたものではフッタの下縁に1pxの隙間ができるようだったので、32行目あたりのスクリプトを少しだけイジった。

[-] document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";
[+]  document.getElementById(footerId).style.top = (wh-fh-ft)+"px";

オリジナル作者サイト
http://blog.webcreativepark.net/2007/11/16-012253.html

jQuery version作者サイト
https://gist.github.com/ginlime/87d0059c0740b43eb036

今度はメインとフッタの間に隙間が...

2016/12/14 追記

というわけでfooterFixed.jsはとっても便利なのだが、上の隣接要素(通常メイン)に背景色や枠線があると隙間ができて、それはそれで目立ってしまう難点がある。

sample2

この問題を解消した改造版の紹介記事があったので試してみたらバッチリだった(^^ 上の隣接要素のidをmainとしておく必要がある。

sample3
sample4(jQuery version、 Ida 加工、bodyの上下マージンを0にしておかないと微妙に変になる)

jQuery.footerFixed_miike.js(jQueryバージョン)

あと必ずしもwindowの下縁に余白なしで固定したい場合ばかりではなく、bodyに下マージンを作りたい場合もあるかもしれない。そこで自分でもド素人ながら、このあたりを一応改造してみた

参照サイト:
http://blog-miike.zk-japan.com/?p=96