概要

コンテンツ容量が少ない「XXX完了ページ」などで、フッターに色がついている場合、フッターの下部に不要な空白スペースができてしまい見栄えが悪い。
これを回避するために、コンテンツ量が少ない場合フッターをブラウザの画面下部に固定するようにしたい。

考え方

判定が行われるタイミング
- 画面が表示される時
- 画面サイズが変更される時
計算
- 画面の高さ > (ヘッダーからコンテンツ下部までの高さ）＋フッターの高さ
  - フッターを画面下部に配置
- 画面の高さ <= (ヘッダーからコンテンツ下部までの高さ）＋フッターの高さ
  - フッターをコンテンツ下部の後に続けて配置

コード

Case1. 全部の高さを計測する

HTML

<!DOCTYPE html>
<html>
<head></head>
<body>
<header id="header">
  ... header content ...
</header>
<div id="main">
  ... main content ...
</div>
<footer id="footer">
  ... footer content ...
</footer>
</div>
</body>
</html>

JS

function set_footer_position() {
    var windowHeight = $(window).height();
    var mainHeight = $("div#main").height();
    var headerHeight = $("header#header").height();
    var footer = $("footer#footer");
    var footerHeight = footer.height();
    if ((headerHeight + mainHeight + footerHeight) < windowHeight) {
        footer.offset({ top: windowHeight - footerHeight, left: 0 })
    } else {
        footer.offset({ top: headerHeight + mainHeight, left: 0 })
    }
}

Case.2 簡単な実装方<おすすめ>

HTML

<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- 下記追加 最終的にこれはいらない-->
<div id="topPoint"></div>
<header id="header">
  ... header content ...
</header>
<div id="main">
  ... main content ...
</div>
<!-- 下記追加 -->
<div id="bottomPoint"></div>
<footer id="footer">
  ... footer content ...
</footer>
</div>
</body>
</html>

JS

function set_footer_position2() {
    var windowHeight = $(window).height();
    var footer = $("footer#footer");
    var footerHeight = footer.height();
    var mainHeight = $("#bottomPoint").offset().top - $("#topPoint").offset().top;
    if ((mainHeight + footerHeight) < windowHeight) {
        footer.offset({ top: windowHeight - footerHeight, left: 0 })
    } else {
        footer.offset({ top: mainHeight, left: 0 })
    }
}

こちらでは単純に topPoint と bottomPoint の間にフッター以外のコンテンツを配置することで、高さの引き算でコンテンツの高さを計測しようというもの。

実際に console.log に値を出力すると

$("#topPoint").offset().top = 0

であることがわかるので最終的には下記のように書き直すことができる。

function set_footer_position3() {
    var windowHeight = $(window).height();
    var footer = $("footer#footer");
    var footerHeight = footer.height();
    var mainHeight = $("#bottomPoint").offset().top;
    if ((mainHeight + footerHeight) < windowHeight) {
        footer.offset({ top: windowHeight - footerHeight, left: 0 })
    } else {
        footer.offset({ top: mainHeight, left: 0 })
    }
}

上記で作成した関数を用いて、HTMLが読み込まれた時と、画面のサイズが変更があった時に呼ばれるように設定する。

$(document).ready(function (){
    set_footer_position3();
});

$(window).resize(function (){
    set_footer_position3();
});

おわりに

Case1 ではページによってはヘッダを浮かせたりして画面高さに関係ないなどの場合があり、ずれてしまうことがあったので Case2 を考えました。
各画面に関係ない要素を設定することで一般化しやすいと感じました。

修正履歴

(2022/10/26) 一部でhtmlタグの「id」が「if」になっていましたので修正しました。