• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

footerFixed.js ファイルのダウンロード

以下のページより 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>


フッターを固定させる例

HTML側では、固定させたい要素に id="footer" を付けます。
<body>
<div id="container">
	<div id="contents">コンテンツ</div>
	<div id="footer">フッター</div>
</div>
</body>
CSS で固定させる場合と異なり、id="footer" の要素に position:absolutebottom:0 などで補正しなくて良い分、設置は楽です。


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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください