1. TOP
  2. CSS
  3. フッターを一番下に表示させる方法

フッターを一番下に表示させる方法

「コンテンツ内容が少ない時でも
フッターエリアは画面の一番下に表示したい。」


そんな事はこれまでも幾度となくありました。
しかし、その都度の状況などで対処方法が違ったので、ふいうちにその時がやってくると、

「あれ〜どうしてたっけ？」

と、自身がなる為、覚書メモとして書いておこうと思います。

ひと昔前は横並びのリストや横並びのBoxを配置する際に多様していたのは『float』でした。
『flexbox』が登場してからはとても便利でずーっとflexboxばかり使用してます。

その『flexbox』でフッターエリアを一番下へ配置することも簡単に出来ちゃうんですね。
本当に便利になったなぁと感激します。

flexboxでフッターアリアを画面の一番下に配置する


body {
	display: flex;
	flex-flow: column;
	min-height: 100vh;
}

まずはcssでbodyタグにflexboxのスタイルを設定。

main {
	flex:1;
}

そして、メインコンテンツを内包しているタグ（ex:mainなど）に上記スタイルを設定。

※htmlの記述は以下の内容が想定です。

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">

<head>
	<title>フッターエリアを一番下に表示させる</title>
</head>

<body>

	<header>
		ヘッダーコンテンツ
	</header>

	<main>
		メインコンテンツ
	</main>

	<footer>
		フッターコンテンツ（このエリアの内容が画面の一番下に表示される）
	</footer>
</body>
</html>

これだけの簡単な設定でコンテンツが少なくてもフッターは画面の下に表示されるようになります。
今まで色々複雑な設定をやっていたことが・・・・『flexbox』素晴らしい✨

SENSITIVITY