フッターをウィンドウ下部に固定する

コンテンツ量が少ない時にフッターがウィンドウ中段に表示されると、それより下の部分が寂しいので、縦幅が足りてない時でもフッターがウィンドウ最下部に表示され、ただの fixed 配置と違ってスクロールでウィンドウ外に逃がせるようにする手順です。

方法は2つあります。

CSS で実装する方法
jQuery で実装する方法

jQuery でやると手間がかからないですが、ページ表示の最初にコンテンツの高さを取得してからコンテンツ下部にフッターを移動するので一瞬だけ本来の位置にフッターが表示されます。

CSS で実装する方法

HTML

フッターを含むコンテンツを div で wrap します。

<body>
  <div id="wrap">
    <footer>hoge</footer>
  </div>
</body>

CSS

スタイルの指定は以下。

html, body { height: 100% }

#wrap {
  position: relative;
  height: auto;
  min-height: 100%;
  padding-bottom: 60px; /* フッターの高さ */
}

footer {
  position: absolute;
  bottom: 0;
}

親要素の高さを 100% で確保する。

ウィンドウの高さいっぱいに親要素の領域を確保する必要があります。
その上でラッパーの高さも100%にします。

footer は fixed ではなく absolute で

ウィンドウ固定は fixed ！っていう考え方もありますが、どこまでも付いてくるのはコンテンツによっては鬱陶しくなるので、にしたくもなりますが、100% の縦幅を取ったラッパーの一番下に footer を置くので absolute にして bottom を 0 にします。

このとき footer の縦幅分だけコンテンツが footer と重なるので、ラッパーの下端に同幅の padding を取って位置を調整します。

jQuery で実装する方法

あらかじめ footerFixed.js を入手しましょう。

[ to-R ] footerをウィンドウ下部に固定する『footerFixed.js』

HTML

フッターに id="footer" を付加。wrapper は要らん。
jQuery と footerFixed.js を読み込ませておきます。

<head>
  <script type="text/javascript" src="jquery.3.6.0.min.js">
  <script type="text/javascript" src="footerFixed.js">
</head>
<body>
  <!-- コンテンツが入る -->
  <footer id="footer">hoge</footer>
</body>

結局これ何やってんの？

コンテンツとウィンドウの高さとフッターの高さをリアルタイムで取得して自動で下にはめ込んでる。
ウィンドウサイズ変えても追従してくる。

人間が計算する必要がないのでエクストリーム楽。