最終更新日
記事公開日

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

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

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

了解です!

こちらになります↓

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

関連情報

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

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

詳しいプロフィール