2014/07/27
ページ内容が少ないとき、フッタが上の方に浮き上がって下に余白ができ、据わりが悪くなることがある。
CSSを使ってフッターをウィンドウの最下部に表示する方法があるようで、Sticky Footer、べとつく飴のように(windowの下縁に)くっつく、と言うそうだ。
理屈としては、bodyとかcontent(container,wrapperなどというブロック名が使われることも多い)などウィンドウ全体に収まるべき要素の高さを100%とする。するとfooter部分だけ画面の下にはみ出すので、その分フッタの位置を上にずらすことで実装できるようである。
ところがそんな面倒な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はとっても便利なのだが、上の隣接要素(通常メイン)に背景色や枠線があると隙間ができて、それはそれで目立ってしまう難点がある。
この問題を解消した改造版の紹介記事があったので試してみたらバッチリだった(^^ 上の隣接要素のidをmainとしておく必要がある。
sample3
sample4(jQuery version、 Ida 加工)
jQuery.footerFixed_miike.js(jQueryバージョン)
あと必ずしもwindowの下縁に余白なしで固定したい場合ばかりではなく、bodyに下マージンを作りたい場合もあるかもしれない。そこで自分でもド素人ながら、このあたりを一応改造してみた。
参照サイト:
http://blog-miike.zk-japan.com/?p=96