[JS]jQuery でフッター要素をページ下部に固定する方法

Javascript・jQuery

2012.09.27

フッター要素をページ下部に固定できるjavascriptrライブラリfooterFixed.jsです。

CSSでフッターを固定させる方法もありますが、こちらは固定させたい要素（フッター）にid="footer"を付ければ簡単に固定されますので便利です。

以下のページよりfooterFixed.jsのファイルをダウンロードします。
footerFixed.js

footerFixed.jsのファイルをjqueryファイルと一緒に<head>内に設置します。

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

1 2	<script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./footerFixed.js"></script>

HTML側では固定させたい要素にid="footer"を付けます。

<body>
<div id="container">
	<div id="contents">コンテンツ</div>
	<div id="footer">フッター</div>
</div>
</body>

<body>

<div id="contents">コンテンツ</div>

</div>

</body>

CSSで固定させる場合と異なり、id="footer"の要素にposition:absoluteやbottom:0などで補正しなくて良い分、設置は楽です。

参考ページ
footerをウィンドウ下部に固定する『footerFixed.js』

CSSでフッターを固定させる場合は、別途[CSS]CSS でフッター要素をブラウザ下部に固定する方法の記事を参考にしてみてください。