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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

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

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

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

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>

最下部に固定したフッターのデモ

上記HTML、CSSのデモがこちら!

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

まとめ

今回紹介した4行のコードを使えばページのコンテンツが少ない時でもフッターを最下部に固定することができます。

最後にもう一度おさらいすると、フッターを最下部に固定するポイントは

  • フッターの親要素にdisplay:flex。flex-direction:column。min-height:100vhを指定する
  • フッターにmargin-top: autoを指定する

となります。

 

「フッターのコーディングについてさらに知りたい!」

という方は以下の記事でWeb制作でよく使用するフッターのTipsを紹介しているので目を通してみてください〜

フッター固定メニューを作る方法【HTML・CSSをコピペで実装】フッター固定メニューを作る方法【HTML・CSSをコピペで実装】 jQueryでフッター手前で止まるボタンの実装方法【jQuery】フッター手前で止まるボタンの実装方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です