【CSS】コンテンツの高さが足りず、footerが浮いてしまう時の対処法

2024.10.16

【CSS】コンテンツの高さが足りず、footerが浮いてしまう時の対処法

コンテンツの高さが足りなくて、footerの下に余白が出来てしまうことってありますよね。
footerを画面下に置きたい（画面下固定ではない）時の対処法をご紹介します。

CSSの書き方

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

footer {
	margin-top: auto;
}

解説

bodyに「display:flex;」を指定することで子要素が自由に整列できます。
「flex-direction:column;」は上から縦方向に並べる様に指定します。
これを入れないと、子要素が横並びになってしまいます。
「min-height:100vh;」で最低の高さを画面の高さに指定。

footerは「margin-top:auto;」で下に配置されます。

実装

高さのある画面で見て頂くと、フッターが画面下にあり、コンテンツとフッターの間に白い余白が出来ていることがわかるかと思います。

<br /> See the Pen <a href="https://codepen.io/Uchaaan/pen/QWevNmZ"><br /> コンテンツの高さが足りない時でもfooterは画面下に表示</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

いかがでしょうか。
また、高さが足りている場合にはいつも通り、スクロールになります。