【CSS】フッターとページ下部の隙間を解消する方法

コンテンツ量が少ないときにできる「アイツ」

ヘッダーがあって、メインのコンテンツがあって、フッターがあって～という基本的なサイト構造を考えたとして、いつも悩んでしまうのがフッターの表示方法です。

コンテンツ量が少ないとページの最下部と隙間ができてしまうのです。

最下部に固定表示してあげても良いのですが、コンテンツ内容によっては非常にジャマ。

今回紹介する方法はとにかく最下部に隙間ができないように表示してくれ！固定とかいらん！という方向けの方法です。

フッターを最下部に表示したいときのポイントは 3 つ。

コードのサンプルを作成したので見てみましょう。

わかりやすいようにパーツごとに色を付けています。

header と footer の間のメインコンテンツが広がっているわけではないので、wrapper クラスにメインコンテンツに設定したい背景色と同じものを設定してあげると良い感じです。

ちなみに、Bootstrap だとあらかじめ定義されている class を使って楽に設定することができます。

Bootstrap だとこんな書き方になります。

<div class="d-flex flex-column min-vh-100">
  <header>header</header>
  <main>main</main>
  <footer class="mt-auto">footer</footer>
</div>

Bootstrap 使いの方は覚えておいて損のない技だと思いますので、是非ご活用くださいませ。