こんにちは、yutaです。
今回は、フッターをページの最下部に固定配置する方法についてお話しします。
「そもそも、フッターってページの最下部に固定配置されるもんなんじゃないの？」
とおっしゃる方もいらっしゃるかと思います。基本的にはその通りです。・・・が、ページ内のコンテンツが少ない場合にはフッターがブラウザの底部に到達せず浮いたように表示されてしまいます。(下図参照)
これを解消するために、position: fixedやposition: absoluteを利用した方法が紹介されていますが、これらはコンテンツが少なくフッターが浮いてしまっているページに限定して有効な方法です。
WordPressなどでフッターを複数ページで共用する場合には、コンテンツが多くスクロールがあるページで「ページの最下部までスクロールした訳でもないのに常にフッターがブラウザ底部に表示されたり」「←の症状に加え、スクロールするとそれに合わせてフッターもスクロールされたり」と思った挙動になりません。
そこで今回は、そのページのコンテンツ量に合わせてJavaScriptで動的にフッターの表示位置を調整する方法を紹介します。
本記事で紹介する方法では、jQueryを一部利用します。jQueryの導入方法については「超簡単なjQueryの導入方法についてメモしておく」をご覧ください。(簡単です！)
コンテンツの最後に空のdiv要素を配置
上図のとおり、コンテンツの最後に空のdiv要素を追加します。(idは”end_of_the_page”としています。)
JavaScriptでコンテンツに合わせて、このdiv要素の高さ(height)を調整することでフッターをブラウザ底部にぴったりと配置します。
JavaScriptの記述
以下に実際のコードを示していますが、図で解説していきます。
offset()は指定した要素のページトップからのオフセット(ページトップから何px下がればその要素の上端が現れるか)を取得できます。実際にはページ左端から要素の左端までのオフセットも取得されるので前者の値を取り出すために、7行目のgap代入箇所でoffsetVal.topと指定しています。
outerHeight()は指定した要素のborderサイズまで含めた高さを取得する関数です。
window.innerHeightで、ブラウザの表示領域の高さを取得できます。
先に掲載したコードで、上図のset_hの値を算出できたら、if文で「footer位置の調整が必要かどうかを判定」したうえで、コンテンツ最下部に配置した空のdiv要素の高さにset_hを設定します。
これでコンテンツが少なくてもフッターがブラウザ最下部に表示されるようになりました。このJavaScript関数はブラウザの読み込み時とリサイズ時に実行されるため、ブラウザのサイズをドラッグして変えた場合にも対応できます。
