Zenn
🐡

コンテンツの量が少なくてもフッターをページ最下部に表示する方法

2022/08/08に公開
HTML
PHP
tech

Gridを利用します。

  1. #body を display: grid; にする
  2. grid-template-rows: auto 1fr auto; の auto は header と footer の指定に、1fr がコンテンツ部分の指定になる
  3. min-height: 100vh; は、コンテンツの量が少なくても高さを引き伸ばしてくれる
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Fixed footer to bottom by grid layout</title>
	<style>
	body, header, footer {
		margin:  0;
		padding: 0;
	}
	header, footer {
		border: 1px solid black;
	}
	#body {
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-height: 100vh;
	}
	</style>
</head>
<body id="body">
	<header>header</header>
	<section>
		<p>This example will always display the footer at the bottm.</p>
		<p>この例では、フッターが常に最下部に表示されます。</p>
		<p>此示例将始终在底部显示页脚。</p>
	</section>
	<footer>footer</footer>
</body>
</html>

Discussion