ブルーシュ

IT技術の勉強記録

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

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

, ,

※2022年3月29日
display:gridが発明されたので、古い記事になりました。
新しい記事はこちら:【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 #フッター

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク