最終更新日
記事公開日

高さがないときでもフッターを下部に固定する(display:flex)

お客さん

まだコンテンツが少なくて、画面の途中にフッターが来てしまうの・・・

高さが低いときでも、フッターを画面下に固定できる方法を教えて欲しい。

隊員1号

了解です!

こちらになります↓

body {
	margin:0;
}
#container {
	display:flex;
	flex-direction:column;
	height:100vh;
}
footer {
	margin-top:auto;
}
<div id="container">
	<header>header</header>
	<main>main</main>
	<footer>footer</footer>
</div>

SAMPLE

高さがないときでもフッターを下部に固定(display:flex)
この記事のURLをコピー

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

関連情報

運営者プロフィール
運営者のプロフィール画像
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール