【CSS】flexboxでフッターを画面最下部に固定する

WEB, プログラミング

練習過程で学んだことのアウトプット。

コンテンツ量が多いときはスクロースした最下部に、コンテンツ量が少ないときでも画面の最下部にフッターが表示されるようにする方法を調べました。

いろいろやり方があり、どういうときにどの方法を使用するのがいいのか、まだわからず・・・。
今回は一番簡単そうなflexboxを使用する方法で試しました。

サンプルのコード

HTML

<div class="wrapper">
	<div class="main">
		コンテンツ
	</div>
	<footer class="footer">
		フッター
	</footer>
</div>

CSS

必要なCSSの記述

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.main {
	flex: 1;
}

コードの意味

flex-direction: column;

フレックスコンテナ内のコンテンツを縦方向に配置する。
（ブロック要素のように配置する）

これによって、コンテンツ部分の.mainとフッターを縦に並べる

参照：flex-direction－CSSリファレンス

min-height: 100vh;

要素の高さの最小値を、100vh＝ビューポート全体に指定する

参照： – CSS: カスケーディングスタイルシート | MDN

flex: 1;

フレックスコンテナ内のアイテムの伸長・収縮を指定する
.mainにこれを指定することで、.wrapper内で.footerの高さを除いた部分が.mainの高さになる