jQueryとCSSでコンテンツ量が少ない時footerを下部に固定

コンテンツ量が少ない場合、footerが画面上部に上がってきて、footerと画面下部までに余白ができてしまい、見栄えが悪くなってしまいます。
下記の方法で、footerを下部に固定は可能ですが、それぞれデメリットもあります。

footer {position: absolute; bottom: 0;} コンテンツ量が多い時、コンテンツと重なる。

footer {position: sticky; bottom: 0;} 常に画面下部にコンテンツに重なることなく固定表示可能。但し、footerにそれなりの高さがあると鬱陶しい。

よって、これらのデメリットをふまえ、jQueryとCSSで解決してみたいと思います。

contents

解決方法

解決方法

footerの高さとfoooterのトップからの位置の合計が、画面の高さに達していない時に、画面下部固定用のクラスを付与し、CSSで調整します。
コードの記述量が比較的少ないので簡単です。

使用するもの

CSSファイル
JSファイル

事前準備

jQuery及びご利用のJSファイル、CSSファイルをHTMLファイルで読み込みます（詳細説明割愛させていただきます）。

因みに、jQueryの2021年7月現在の最新バージョンは、3月にリリースされた3.6.0になっています。

実装手順

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;
}

お役に立てれば幸いです。