コンテンツ量が少ない時だけフッターを下部に固定する方法【CSS】

この記事の前提条件

対象: CSS(全モダンブラウザ対応)
難易度: ★★☆
所要時間: 約10分

本文が少ないページだけ、フッターが画面の途中で浮いてしまい、下に不自然な余白ができる…というレイアウト崩れ、経験ありませんか。コンテンツ量に関わらず、フッターを常に画面の一番下に配置するテクニックを紹介します。

flexboxで縦方向のレイアウトを組む

bodyタグ全体をflexboxの縦並びにし、フッター以外の部分(ヘッダー・メインコンテンツ)を「余った分だけ伸びる」ように設定するのが、今のCSSで一番シンプルな方法です。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 画面の高さいっぱいを最低保証する */
}

main {
  flex: 1; /* 余った縦の余白をすべて占有する */
}

それぞれの役割は次の通りです。

min-height: 100vh;: bodyの高さを、コンテンツ量に関わらず最低でも画面の高さ分は確保する
flex: 1;: メインコンテンツ部分に、ヘッダー・フッター以外の余った縦スペースをすべて割り当てる

これにより、コンテンツが少ないページではmainが自動的に伸びてスペースを埋め、結果としてフッターは常に画面の一番下(もしくはそれより下)に押し出されます。

⚠️ 「固定表示(常に見える)」との混同に注意

「フッターを下に固定」という言葉には、実は2つの意味が混同されがちです。1つは今回紹介した「コンテンツが少なくても画面最下部に配置される」という意味、もう1つは「スクロールしても常に画面内に表示され続ける」という意味(position: fixed;で実現)です。この2つは全く別の実装なので、「フッター固定」で検索する時は、自分がどちらを実現したいのか意識して調べると、遠回りせずに済みます。