【CSS】フッターをコンテンツに依存せず、最下部に固定する

こんなときに

• フッターをページ最下部に固定したい。
• コンテンツが短かったり、長かったりする場合がある。

コード

Pug

.wrap
  .header ヘッダー
  .contents コンテンツ
  .footer フッター

SCSS

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer {
  margin-top: auto;
}

解説

ポイント

• 縦向きのflexboxを使う。
• flexboxの、並んだ要素を外の要素内に押し込めてしまう性質を利用する。
• フッターにはmargin-top:autoを用いて、自動で寄ってもらう。

外側

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

ページの全てを囲うdivに display: flex;を使い、向きを縦にする。
ページ全体の高さを、ページの高さ100vhで指定しておく。
ページのコンテンツが画面に収まらない量の場合は、その量に応じた高さにするため、heightではなくmin-heightを使う。

フッター

.footer {
  margin-top: auto;
}

フッター側では、上のマージンをautoにするだけ。
外側のFlexboxがページ分の高さを確保しているため、コンテンツが少ない場合、自動で最下部に寄る。

実装デモ

footer-fixed-page-bottom

参考

footerを常に最下部に固定する方法(簡単) - Qiita
CSSフッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
CSS Flexbox の各プロパティの使い方を詳しく解説 | コリス