footerを最下部に固定する方法は色々ありますが、おそらくposition:absoluteを使う方法が一番有名なんじゃないでしょうか？まぁこれでも問題はないんですが、この方法には1つだけ弱点があります。

今回はその弱点についての解説と、それを解消する別の記述方法を紹介します。

absoluteを使ったfooter固定の方法

まずは一般的によく使われているposition:absoluteを使ったfooter固定方法を紹介します。

HTML,CSS

ヘッダー、メイン、フッターという3つのコンテンツを.containerに内包したシンプルな1カラムのページを想定しています。

<div class="container">
	<header>
		header
	</header>
	<main>
		<p>main</p>
		<p>main</p>
		<p>main</p>
	</main>
	<footer>
		footer
	</footer>
</div>

.container{
	position: relative;
	box-sizing: border-box;
	padding-bottom: 50px;
	min-height: 100vh;
}
header,main,footer{
	width: 100%;
}
header{
	height: 50px;
	background: #EF5350;
}
main{
	background: #03A9F4;
}
footer{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 50px;
	background: #689F38;
}

※一部のスタイルは省略しています。

表示結果

See the Pen footer_fixed by Leo_8192 (@Leo_8192) on CodePen.

このように、mainのコンテンツが少ない場合でもしっかりfooterが最下部に固定されています。

この記述の弱点

このコードの以下の弱点があります。

• footerの高さを変更したら.containerのpadding-bottomも変更しなくてはいけない
• そもそもfooterの高さが固定じゃない（可変である）場合はレイアウトが崩れる

もしfooterの高さを100pxに変更して.containnerのpadding-bottomを50pxのまま変更しなかった場合、メインのコンテンツが増えたら50px分だけfooterに被ってしまいます。

footerは絶対に○○pxに固定して、変更する可能性がゼロ！という状況なら問題ないんですが、どんな指示が来るか分からないのがWeb業界なので、予め色々な状況を考慮したコードにしておくのが無難です。

それでは、footerの高さが変更される可能性がある、もしくは高さが可変の場合でも対応できる手法を紹介します。

flexを使ったfooter固定の方法

flexを使うことで、footerの高さを考慮せずに簡単に最下部へ固定することが可能になります。

HTML,CSS

HTML部分は先程と変わりませんが、CSSがかなり変わっています。

<div class="container">
	<header>
		header
	</header>
	<main>
		<p>main</p>
		<p>main</p>
		<p>main</p>
	</main>
	<footer>
		footer
	</footer>
</div>

.container{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
header,main,footer{
	width: 100%;
}
header{
	height: 50px;
	background: #EF5350;
}
main{
	background: #03A9F4;
}
footer{
	margin-top: auto;
	height: 50px;
	background: #689F38;
}

※一部のスタイルは省略しています。

表示結果

See the Pen footer_fixed_1 by Leo_8192 (@Leo_8192) on CodePen.

はい、とりあえずabsoluteの固定方法と同じ表示結果が得られるのが確認できました。

これだけだとabsoluteとの違いは分かりにくいので、footerの高さが可変のパターンも見てみましょう。

表示結果（footerの高さが可変のパターン）

See the Pen footer_fixed_2 by Leo_8192 (@Leo_8192) on CodePen.

animationでfooterの高さをぐりぐりと変化させてみました。表示結果から分かる通り、高さがどれだけ変化しても常に画面最下部に固定されているのが確認できるかと思います。

stickyを使ったfooter固定の方法

続いては少し変わった固定方法です。

position:stickyを使えば、先程のflexを使った固定方法と同じ表示結果を得ることができます。

HTML,CSS

HTML部分は変わりません。

<div class="container">
	<header>
		header
	</header>
	<main>
		<p>main</p>
		<p>main</p>
		<p>main</p>
	</main>
	<footer>
		footer
	</footer>
</div>

.container{
	min-height: 100vh;
}
header,main,footer{
	width: 100%;
}
header{
	height: 50px;
	background: #EF5350;
}
main{
	background: #03A9F4;
}
footer{
	position: sticky;
	top: 100vh;
	left: 0;
	background: #689F38;
}

※一部のスタイルは省略しています。

表示結果（footerの高さが可変のパターン）

See the Pen footer_fixed_3 by Leo_8192 (@Leo_8192) on CodePen.

はい、この方法でもしっかり画面最下部に固定されているのが確認できました。stickyが登場したのは割と最近だし、サイドバーのコンテンツ固定等で使われるのがメインのプロパティなので、footerの固定にも使えるというのは知らなかった、思い付かなかったという人も多そうです。

まとめ

footerの高さが絶対に変更されないという状況ならposition:absoluteを使ってもいいですが、後々のメンテナンス性を考えるならflex、もしくはstickyを使った固定方法を使うのが得策です。

「同じ結果が得られるなら、flexとstickyのどっちを使えばいいの？」という疑問が出てきそうですが、サイトの構成（タグ組み）を見て、導入が簡単そうなほうを選べばOKです。というかもう好みで選んでも良いんじゃないですかね…