[JS]jQuery でフッター要素をページ下部に固定する方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

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

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

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

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

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

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

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

スポンサード