soliloquy / HTML / フッターをウィンドウの最下部に配置する

独り言

フッターをウィンドウの最下部に配置する

ページトップへ

コンテンツの要素が少ない場合でも、フッターをウィンドウの最下部に配置するのはCSSで簡単に実現できます。
ただ、

  1. ページの背景はグレー
  2. コンテンツの幅は960pxで背景は白
  3. コンテンツはウィンドウの中央に配置したい

等と考えると、フッターは最下部へ表示されるが、コンテンツ部分が途中で切れてしまう。と言った経験をした方も多いと思います。私もいつも悩むので、メモ程度に書きとめます。イメージは◆動作イメージ◆はこんな感じです。ここではfooterFixed として説明します。

  1. HTML

    htmlは「wrapper」「header」「contents」「footer」の構成とします。

    
<!doctype html>
<html>
<head>
<link rel="stylesheet" src="footerFixed.cssを設置した場所">
</head>
<body>
<div id="wrapper"><!-- ページ全体を囲むブロックです。-->
<div id="header">ヘッダーを記述</div>
<div id="contents">ここがコンテンツ部分</div>
<div id="footer">フッターを記述</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- jqueryを呼び込む-->
<script type="text/javascript" src="footerFixed.jsを設置した場所"></script>
</body>
</html>

  2. CSS

    ページ用のCSSとは別にfooterFixed.cssを用意します。ページ用のCSSで、headerとfooterは必ず高さを指定しておいてください。

    
/* footerFixed.css */
html, body{
    height: 100%;
}

#wrapper {
    position: relative;
    height: 100%;
    height: auto!important;
    min-height: 100%;
}

#footer {
	position: absolute;
	bottom: 0px;
}

  3. JavaScript

    上記CSSでフッターは下に配置されていると思います。JavaScriptで「contents」の足りない高さを補います。
    jQueryが必要ですので、footerFixed.jsの前に呼び込んでおいてください。

    
/* footeFixed.js */
var windowHeight = 0;
var headerHeight = 0;
var contentsHeight = 0;
var footerHeight = 0;
var diff = 0;

(function() {    // ページが開くときの処理
    measurementElems();
    contentsInit();
})();

$(window).resize(function() {    // ウィンドウがリサイズされて時の処理
    contentsInit();
});
    
function contentsInit() {    // contents の高さを変更する
    measurementWindow();
    changeContentsHeight();
}

function measurementElems() {    //header contents footer の高さを取得
    headerHeight   = $('#header').outerHeight();
    contentsHeight = $('#contents').outerHeight();
    footerHeight   = $('#footer').outerHeight();
}
    
function measurementWindow() {    // Windowの高さを取得
    windowHeight = $(window).innerHeight();
}
    
function changeContentsHeight() {
    diff = windowHeight - headerHeight - contentsHeight - footerHeight;
    if (diff > 0) {
        $('#contents').outerHeight(contentsHeight + diff);
    } else {
        $('#contents').css('padding-bottom', footerHeight);
    }
}
wordprass