Flexboxによるスティッキーフッター

Flexboxによるスティッキーフッター

「スティッキーフッター」はページコンテンツが少ない場合にビューポートの下部に固定され、コンテンツがビューポートの高さを超える場合は自然に下がります。Flexbox以前は非常に困難でしたが、今はわずか数行で実現できます。

CSSコード

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  flex: 0 0 auto;
}

main {
  flex: 1;
}

footer {
  flex: 0 0 auto;
}

仕組み

1. body（またはラッパー要素）がmin-height: 100vhのカラムフレックスコンテナになり、少なくともビューポート全体を埋めます。
2. ヘッダーとフッターはflex: 0 0 autoで、拡大も縮小もせず、コンテンツに必要なスペースのみ取ります。
3. mainはflex: 1（flex-grow: 1の省略形）で、残りのスペースすべてを埋めるように拡大します。

なぜmin-heightでheightではないのか

height: 100vhではなくmin-height: 100vhを使用することが重要です。height: 100vhではbodyがビューポートの高さちょうどになり、コンテンツがオーバーフローします。min-heightでは少なくともビューポートの高さですが、それ以上に大きくなることができます。