ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2021.03.18  最終更新日:2021.03.18

js / jQuery

footerの下に隙間ができるのを防ぐfooterFixed.jsの使い方

コンテンツ量が少ないために、footerの下に隙間ができるのを防ぎたい。そんなときに使えるjsプラグインです。

footerFixed.jsの使い方手順

①ファイルのダウンロード

footerFixed.jsは、to-Rさんのサイトよりダウンロードさせていただきます。
※こちらのjsライブラリはto-Rさんが作成されています。

②必要なファイルを任意のフォルダに設置する

以下のように、ダウンロードしてきたfooterFixed.jsファイルを任意のフォルダに設置して以下のように読み込みます。

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

③HTMLにfooterFixed.jsを動かすためのidを書く

HTML

ウィンドウの下部に固定したい要素(例えば、footerタグなど。footerタグではなくても大丈夫です。)にidを『footer』と指定するだけです。
以下のようにするだけです。

<footer id="footer">
<!-- ここに何か要素が入ります。  -->
</footer>

完成サンプル

以下、サンプルです。

その他

jsを使用せずにcssで対応することもできるようなので、そちらも調べたら記事にします。

最新記事