1. ホーム /
  2. CSS /
  3. コンテンツ量が少ない時にフッターが表示最下部へ張り付くCSS

コンテンツ量が少ない時にフッターが表示最下部へ張り付くCSS

コンテンツ量が少ない時にフッターをブラウザ最下部へ表示させたい場合、下記のように設定します。

HTML例


<html>
	<body>
		<div class="content">
			コンテンツ
		</div>
		<div class="footer">
			フッター内容
		</div>
	</body>
</html>

CSS


html,
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer {
	margin-top: auto;
}

※CSS初期化やノーマライズ等は省略