footerFixed.jsの改造

2016/12/24

ページ内容が少ないとき、フッタが上の方に浮き上がって下に余白ができ、据わりが悪くなることがある。footerFixed.js というライブラリは、フッタのidを"footer"としておくだけで、ウィンドウの最下部に配置してくれる便利なツールだ。

footerFixed.jsについては、コチラに紹介したが、少し残念なところは、上の隣接要素に枠線や背景色があると隙間が目立って、それはそれで見栄えが悪くなる点だ。またbodyの下マージンを無視してウィンドウの下縁に張り付くのが気になることもあるかもしれない。

そこでそのあたりを改造してみた（windowを拡大resizeするときは問題ないが、縮小するとき、footerがついていってくれないときがある orz...）

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

<body>
.....
.....
<div id="main">メイン内容</div>
<div id="footer">フッタ内容</div>
</body>

footer要素の上に隣接しているidをmainとしておく。仕組み的にfooterの位置を変えるのでなく、mainの高さを変えている。