【CSS】flexを使ってフッターを固定する方法

コンテンツの内容が足りなくてフッターの下に余白ができてしまうことを防ぐために常にページ下部にフッターを固定して表示させておくことがあります。そのような場合は、positionプロパティを使ったりして実装する方法がありますが、flexを利用しても簡単にフッターを固定して表示させることができます。

flexでフッターを固定するには？

flexを利用したフッターの固定方法として、以下のような簡単なコードを作って見ていきます。

<div id="wrap">
<div id="contents">
～ここにコンテンツ内容～
</div>
<footer>フッター</footer>
</div>

まずは、html要素、body要素、flexを作る親要素（例では「#wrap」）に対して高さを100％にします。

html,body,#wrap {
  height: 100%;
}

次に、親要素に対して「flex」を指定しますが、このままでは子要素は横並びで表示されてしまうので、flex-directionプロパティに「column」を指定して上から下へ縦に並ぶようにします。

#wrap {
  display: flex;
  flex-direction: column;
}

このままでは、コンテンツの内容が少ない場合はフッターの下にスペースができてしまうので、flexプロパティを使ってフッターを下へ押し下げます。

#contents {
  flex: 1;
}

flexプロパティとは、親要素に余ったスペースがあるときにflexを指定した要素が他の要素に対してどのくらい伸びるかを決定します。この性質を利用して親要素に余りのスペース（ここではフッターの下）がある場合は、flexを指定した要素（ここでは「#contents」）が下まで伸びて、結果的にフッター部分がページ下部に固定されたように表示することができます。