コンテンツ量が少ない場合、footerが画面上部に上がってきて、footerと画面下部までに余白ができてしまい、見栄えが悪くなってしまいます。
下記の方法で、footerを下部に固定は可能ですが、それぞれデメリットもあります。
footer {position: absolute; bottom: 0;} コンテンツ量が多い時、コンテンツと重なる。
footer {position: sticky; bottom: 0;} 常に画面下部にコンテンツに重なることなく固定表示可能。但し、footerにそれなりの高さがあると鬱陶しい。
よって、これらのデメリットをふまえ、jQueryとCSSで解決してみたいと思います。
解決方法
footerの高さとfoooterのトップからの位置の合計が、画面の高さに達していない時に、画面下部固定用のクラスを付与し、CSSで調整します。
コードの記述量が比較的少ないので簡単です。
使用するもの
- CSSファイル
- JSファイル
事前準備
jQuery及びご利用のJSファイル、CSSファイルをHTMLファイルで読み込みます(詳細説明割愛させていただきます)。
因みに、jQueryの2021年7月現在の最新バージョンは、3月にリリースされた3.6.0になっています。
![pug](https://weblog.b-moon.net/wp-content/uploads/2021/07/pug-1209129_1920_cut-min.jpg)
実装手順
JSファイル
$(window).on('load resize', function(){
const winh = $(window).height(); //画面の高さを取得
const fth = $('footer').outerHeight(); //footerの枠線込みの高さを取得
const ftPos = $('footer').offset();//footerの位置の高さを取得
//footerの高さと位置の合計がウィンドウの高さに達していないとき
if ( (fth + ftPos.top ) < winh ) {
$('footer').addClass('footer-fix'); //画面下固定用のクラスを付与
} else {
$('footer').removeClass('footer-fix'); //画面下固定用のクラスを付与
}
});
CSSファイル
jQueryで付与したクラスを利用して、下部に固定します。
.footer-fix {
position: absolute;
bottom: 0;
}
お役に立てれば幸いです。