1.はじめに
本記事はフッターをページ長さに合わせてページ下部に固定する方法について自分の勉強記録も兼ねて執筆します。
ちなみにfooterFixed.jsというライブラリを使えば簡単にできるみたいですが（笑）、本記事ではそれは使わずに実装していきます。
footerFixed.jsの使い方はこちら
2.目的
フッターをページ長さに合わせてページ下部に固定する
3.コード
簡単ですが、下がコード例です。
今回は簡略下のためcss、JavaScriptをhtmlファイル内に書き込んでいます。（実際は別ファイルで管理する方が良いと思います）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
body {
color: #fff;
text-align: center;
width: 50%;
margin: 0;
padding: 0;
}
header {
background: blue;
height:100px;
line-height: 100px;
}
section {
background-color: #444;
height: 200px;
line-height: 200px;
}
footer {
background: orange;
width: 50%;
height: 100px;
line-height: 100px;
}
</style>
<header>ヘッダー</header>
<section>メインセクション</section>
<footer id='footer'>フッター</footer>
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script>
$(function(){
//フッターを最下部に固定
var $footer = $('#footer');
if(window.innerHeight > $footer.offset().top + $footer.outerHeight() ) {
$footer.attr({'style': 'position:fixed; top:' + (window.innerHeight - $footer.outerHeight()) + 'px;' });
}
})
</script>
</body>
</html>
Google Chromeで表示すると下のようになります。
ちなみにcssで要素のheightとline-heightの数値を揃えると文字を上下中央揃えに出来ます。
（結構使えます）
今回のメインとなるコードはその内、下のコードです。
<script>
$(function(){
//フッターを最下部に固定
var $footer = $('#footer');
if(window.innerHeight > $footer.offset().top + $footer.outerHeight() ) {
$footer.attr({'style': 'position:fixed; top:' + (window.innerHeight - $footer.outerHeight()) + 'px;' });
}
})
</script>
4.コードの解説
では上記のコードを解説していきます。
❶var $footer = $('footer');
まずvar $footer = $('#footer');でid='footer'のDOMを取得します。
<footer class='footer'>フッター</footer>だったらvar $footer = $('.footer');となります。
id属性とclass属性をつけたセレクタの指定の仕方はcssと同じなのでここでは割愛します。
DOMについてはこちら
簡単にいうとfooter要素を取得したと考えてもらえたらOKです。
フッターのDOMを取得したのでフッターをjavaScript(jQuery）で操作する準備が出来ました。
❷if(window.innerHeight > $footer.offset().top + $footer.outerHeight() )
まず上記コードの意味を簡単に言うと表示画面(window)の長さがフッターの下端までの距離より長い場合です。
なるべく詳しく説明していきます。
図で表すとこんな状態です。
上図のように表示画面の高さよりフッター下端までの距離が短い場合、本記事で解説している<script>〜</script>のコードがなければ表示画面の途中にフッターが表示されることになります。
ですので、このような場合にフッターの位置をページ最下部に固定したいのでif文を使っています。
.innerHeightは要素のpaddingを含んだ高さを取得するメソッド
.outerHeightは要素のborder、paddingを含んだ高さを取得するメソッド
.offset().topはその要素の上端の位置を取得するメソッド
です。
高さを取得するメソッドの詳しい説明はこちら
.offset()メソッドの詳しい説明はこちら
❸$footer.attr({'style': 'position:fixed; top:' + (window.innerHeight - $footer.outerHeight()) + 'px;' });
いよいよフッターをページ最下部へ固定していきましょう。
まず、.attrは要素の属性を取得、変更、追加することのできるメソッドです。
.attrメソッドについてはこちら
style属性を追加して、まず固定するためにposition: fixed;を指定します。
top:〜で固定場所を指定します。
(window.innerHeight - $footer.outerHeight()) + 'px;'で表示画面の下端からフッターのheightを差し引いた位置を指定しています。
つまり、ページ長さに応じて自動でフッターがページ最下部に固定されるということです。
コード解説は以上です！！
※ちなみにcssファイルを別で準備してhtmlファイルに読みこませるようにしていたら.cssメソッドでも実装できるかもです。
5.positon:fixed;との違い
みなさんに質問です。
「フッター固定したいならヘッダーを上部固定するみたいにcssでposition:fixed;を指定すればできるんじゃない？」って思いませんでしたか？
僕は当時は思いました。（みなさん思わないようでしたらすみません）
ですが、フッターに直接position: fixed;を指定した時に困ることがあります。
それについて追加で説明していきます。
まず、WEBサイトをつくる時って1ページで完成することもありますが、複数ページで構成されることの方が多いのではないでしょうか？
複数ページで同じフッターをページ下部に表示することになるので、同じcssを適用することになります。
そのページごとにposition:fixed;の座標をcssで指定しなければならなくなります。
例えば、
ヘッダー、メインセクション、フッターの高さがそれぞれ50px、300px、50pxの場合、
footer {
position:fixed;
top:350px;
}
とすれば、以下の通り綺麗にページ下部に固定できますよね。（図は不要と判断しましたのでイメージしてください）
しかし、別のページでメインセクションのheightが500pxになった場合、同じsample.cssを適用すると下の図のようにメインセクションとフッターが重なってしまいますよね。
このような場合
footer要素に<footer class='footer-1 footer-2'のように複数のclass属性値をつけてcssを分ける必要があります。
これが10ページくらいになるとすると、class属性値も10個つけなればなりません（笑）
控え目に言ってめちゃくちゃメンドクさいです。
プログラミングはめんどくさいことを効率化できるというメリットがあるのにめんどくせいことはできるだけやめましょう。
6.最後に
本記事ではjQueryを用いてページ長さに合わせてフッターをページ最下部に固定する方法について説明しました。
最後にもう一度ソースコードを載せておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
body {
color: #fff;
text-align: center;
width: 50%;
margin: 0;
padding: 0;
}
header {
background: blue;
height:100px;
line-height: 100px;
}
section {
background-color: #444;
height: 200px;
line-height: 200px;
}
footer {
background: orange;
width: 50%;
height: 100px;
line-height: 100px;
}
</style>
<header>ヘッダー</header>
<section>メインセクション</section>
<footer id='footer'>フッター</footer>
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script>
$(function(){
//フッターを最下部に固定
var $footer = $('#footer');
if(window.innerHeight > $footer.offset().top + $footer.outerHeight() ) {
$footer.attr({'style': 'position:fixed; top:' + (window.innerHeight - $footer.outerHeight()) + 'px;' });
}
})
</script>
</body>
</html>
ご存知の方はたくさんいると思いますが、この機能はかなり便利（と思っています）なので是非使ってみて欲しいなと思います！
今回は以上です。
※コメント、ご指摘等ありましたら何でも受付けておりますので気軽にコメントいただけたらと思います。