|Liberty自由に生きる。2019年6月20日フッターをページの最下部に固定配置する方法JavaScriptこんにちは、yutaです。今回は、フッターをページの最下部に固定配置する方法についてお話しします。「そもそも、フッターってページの最下部に固定配置されるもんなんじゃないの?」とおっしゃる方もいらっしゃるかと思います。基本的にはその通りです。・・・が、ページ内のコンテンツが少ない場合にはフッターがブラウザの底部に到達せず浮いたように表示されてしまいます。absoluteを利用した方法が紹介されていますが、これらはコンテンツが少なくフッターが浮いてしまっているページに限定して有効な方法です。WordPressなどでフッターを複数ページで共用する場合には、コンテンツが多くスクロールがあるページで「ページの最下部までスクロールした訳でもないのに常にフッターがブラウザ底部に表示されたり」「←の症状に加え、スクロールするとそれに合わせてフッターもスクロールされたり」と思った挙動になりません。そこで今回は、そのページのコンテンツ量に合わせてJavaScriptで動的にフッターの表示位置を調整する方法を紹介します。本記事で紹介する方法では、jQueryを一部利用します。jQueryの導入方法については「超簡単なjQueryの導入方法についてメモしておく」をご覧ください。上図のとおり、コンテンツの最後に空のdiv要素を追加します。(idは”end_of_the_page”としています。)JavaScriptでコンテンツに合わせて、このdiv要素の高さ(height)を調整することでフッターをブラウザ底部にぴったりと配置します。以下に実際のコードを示していますが、図で解説していきます。offset()は指定した要素のページトップからのオフセット(ページトップから何px下がればその要素の上端が現れるか)を取得できます。実際にはページ左端から要素の左端までのオフセットも取得されるので前者の値を取り出すために、7行目のgap代入箇所でoffsetVal.topと指定しています。outerHeight()は指定した要素のborderサイズまで含めた高さを取得する関数です。window.innerHeightで、ブラウザの表示領域の高さを取得できます。先に掲載したコードで、上図のset_hの値を算出できたら、if文で「footer位置の調整が必要かどうかを判定」したうえで、コンテンツ最下部に配置した空のdiv要素の高さにset_hを設定します。これでコンテンツが少なくてもフッターがブラウザ最下部に表示されるようになりました。このJavaScript関数はブラウザの読み込み時とリサイズ時に実行されるため、ブラウザのサイズをドラッグして変えた場合にも対応できます。【Javascript】HTMLの要素を動的に追加・削除する。Academyは、人気のJavaやHTML、CSS、PHPを始め、UnityやAIコースなど様々な分野のプログラミングが学べるオンラインプログラミングスクールです。エンジニア転職保証があるプログラミング未経験からエンジニア転職を目指す「エンジニア転職保証コース」では、現職エンジニアとキャリアカウンセラーによる転職サポートが受けられます。Academyの無料体験ができます。興味がある方は是非上のバナーからチェックしてみてください。yutric9☆gmail.com☆を@に置き換えて送信してください。仕事のご依頼や、その他の質問など何でもお気軽にお問い合わせください。2019プライバシーポリシ。