ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

[display:flex]フッターの高さが分からないときでも常に最下部に表示する

,

※2022年3月29日
display:gridが発明されたので、古い記事になりました。
新しい記事はこちら

 
むかし書いたこちらの記事から月日が経ち、display:flex;が発明されたので、書き直します。
 
HTMLは、こう。

<body>
	<header></header>

	<main>
		※ここにコンテンツ
	</main>

	<footer></footer>
</body>

 
CSSは、こう。

html,body{
	min-height: 100vh;
}

body{
	display: flex;
	flex-direction: column;
}

header{
	flex-grow: 0;
}

#content{
	flex-grow: 1;
}

footer{
	flex-grow: 0;
}

すごくスッキリしました!

IEでもばっちりです!
2020年10月追記
※IEにはベンダープレフィックスをつけてね~!!

[display:flex]フッターの高さが分からないときでも常に最下部に表示する #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #flex

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。