【CSSネタ】コンテンツが少ない場合、Flexboxを使ってスマートにフッター固定をする。

cssテクニック ホームページ制作

このサムネやばいな。やる気なくすやつだ・・・。

サンプル

<body>
	<header>ヘッダーだよ</header>
	<main>下層ページによくあるメインコンテンツが少ない</main>
	<footer>フッターが下に固定される</footer>
</body>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main{
flex: 1;
}

昔だったらいろいろ駆使してやってたけど、Flexboxが現れてからめちゃ楽になったなぁ。

気に入った記事であれば、ぽちっとお願いします<(_ _)>