【CSS フッター】コンテンツ量が少ないページで最下部に固定する方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

コンテンツ量が少ないページでフッターが最下部に固定されなくて困っている
コンテンツ量が少ないページでフッターの下に意図しない余白ができてしまうのをどうにか直したい
コピペでフッターをウィンドウの一番下に固定できるコードを探している

という方のお悩みを解決します！

コンテンツ量が少ないページとは？
CSS flexで簡単解決！
最下部に固定したフッターのデモ
まとめ

コンテンツ量が少ないページとは？

Web制作をしていると本当に稀にコンテンツ量がペラッペラなページをコーディングする時があります。

ペラッペラなページとは1スクロールもできないようなページです。

この現象が起こり得るデバイスはPC or タブレット。
スマホ表示ではまず起こり得ません。

そのようなページで普段どおりコーディングするとどうなるか？
以下のデモをご覧ください。

See the Pen
mdJoXWv by 石森裕也 (@yuyaphotograph)
on CodePen.

ウィンドウの最下部に表示されてほしいフッターがそこになく、ページ下に意図しない余白ができてしまっているのがわかりますね。

こうなってしまったらとても不格好なので修正しましょう。

具体的な対処法は以下で解説します。

CSS flexで簡単解決！

フッターの親要素である「body」やその他ラッパーにflexの記述を3行、フッターにmargin-topの記述を1行。

合わせてたった4行のコードで最下部にフッターを固定させることができます！

CSSは以下をコピペして使ってみていただければ！

CSS

body,
.Page,
.BodyLayer{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.FooterSection{
  margin-top: auto;/*重要*/
  width: 100%;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #5bc8ac;
  color: #fff;
}

コピペでセットですぐ確認できるよう一応HTMLも置いておきますね。

HTML構造

<div class="Page">
  <div class="BodyLayer">
    <div class="MainSection">
      <p>メインコンテンツが入ります。</p>
      <p>メインコンテンツが入ります。</p>
      <p>メインコンテンツが入ります。</p>
    </div>
    <div class="FooterSection">
      © 2020 フッター最下部固定くん
    </div>
  </div>
</div>