2021-02-17

HTMLとCSSだけでフッターの隙間を解消する方法

概要

コンテンツ量が少ないときにフッターとページ最下部との間にできてしまう隙間の解消方法について説明します。

ヘッダー＋メインコンテンツ＋フッターという構造を想定しています。

HTML＋CSSでの実装方法を解説します。

隙間を作らず、フッターを最下部に表示したいときのポイントは4つです。

イメージしやすいようにサンプルコードを作成しました。

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

main要素の大きさに関わらずfooterが最下部に表示されているのが分かると思います。

実際に使用する際は、wrapperクラスの背景色にmainの背景色と同じ色を指定するか、mainにflex-grow: 1を指定すると良いです。

外側のwrapper要素を設定し、wrapper要素の高さを設定しています。

min-height: 100vhで、最小の高さを画面の縦幅いっぱいにしています（超えた場合は自動的に広がる）。

display: flexとflex-direction: columnで内側の要素を縦に配置しています。

外側の要素の高さを設定しているので、footerに`margin-top: auto`を設定することで、外側の高さ分までmarginが自動で設定されます。

display: flexについては、下記ページで詳しく解説されています。