Bloosh Company

記事のサムネイル画像です。

2019年4月27日

Development>フロントエンド

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

,

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

<body>
	<header></header>

	<div id="content">
	</div>

	<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]フッターの高さが分からないときでも常に最下部に表示する | ブルーシュカンパニー

<<次の記事

magentoのcollection系の小技!

前の記事>>

スーパーマリオUSAの思い出