footerを下部に固定する方法!【jQueryやjsライブラリ使用】

こんにちは。

最近「バ」がつく恋愛リアリティーショーにハマっているぷのこです。

さて、本題に入っていきたいと思います。

今回は、フッターを下部に固定する方法についてのお話。

Webサイトを作っている時に、

「コンテンツが少なくてフッターが上に浮いてしまう!」

「フッターの下に余白ができてしまう・・・」

こんな現象にお悩みではありませんか?

そこで今回は、jQueryやjsライブラリを使ってフッターを下部に固定する方法について解説します。

ぜひ参考にしてみてくださいね。

footerが下部に固定されていない状態とは

フッターが下部に固定されていないと、コンテンツが少ない場合に高さが足りなくて、フッターの下に余白ができてしまいます。例を出すと、こんな感じです。

メインコンテンツが少ないので、フッターが上に来てしまっていて見栄えがよくないですよね。こうならないように、

  • コンテンツが少ない場合、フッターを下部に固定
  • コンテンツが多い場合、スクロールして最後にフッターを表示

するような処理を、jQueryとjsライブラリを使って解説していきます。

jQueryを直接記述してfooterを下部に固定

まずはjQueryを直接記述する方法をご紹介します。

HTML

解説

ヘッダーとメインコンテンツ、フッターを用意します。

bodyタグの終了タグ直前にjQueryをCDNで読み込み、その後に自作のjQueryファイルを読み込みます。

jQuery

解説

このコードで行うのは、

コンテンツが少なくて高さが足りない場合は、フッターを下に固定する

という処理です。

 

で、フッターのDOMを取得して変数に入れます。

 

は、「ブラウザのコンテンツ領域の高さ>ドキュメントの上からfooterの下までの高さ」になる場合という意味です。つまり、コンテンツが少なくて高さが足りない時の処理をこのif文の中に書きます。

 

if文の中の

は、フッターのstyle属性に、上から「ブラウザのコンテンツ領域の高さ−フッターの高さ」の位置にposition:fixedを追加するという意味です。

 

これで、「コンテンツが少なくて高さが足りない場合は、フッターを下に固定する」処理を行うことができます。

表示例

コンテンツが少ない場合はこのような表示になります。

 

コンテンツが多い場合はこのような表示になります。

jsライブラリを使ってfooterを下部に固定

次に、jsライブラリ「footerFixed.js」を使う方法をご紹介します。

まずは「footerFixed.js」を以下のページからダウンロードしてください。使いたいディレクトリ内に保存します。

footerをウィンドウ下部に固定する『footerFixed.js』

https://blog.webcreativepark.net/2007/11/16-012253.html

jsライブラリ「footerFixed.js」のページ。

ダウンロード後の手順

ダウンロードしたら、head要素内に以下のコードを書きます。

今回はjsフォルダ内にfooterFixed.jsを保存したので、src=”js/footerFixed.js”となっています。

 

そしてフッターにid=”footer”を指定します。

 

これだけで、ウィンドウ下部にフッターを固定することができます。

まとめ

いかがでしたか?

今回は、jQueryやjsライブラリを使ってフッターを下部に固定する方法について解説しました。

ぜひ活用してみてくださいね。