ブルーシュ

IT技術の勉強記録

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

【display:grid】フッターを常に最下部に

, ,

【1】コンテンツが少ないときでもフッターを最下部に表示

コンテンツが少ないときでもフッターを最下部に表示

cssサンプル

body{
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}

以前ご紹介した【display:flex】フッターの高さが分からないときでも常に最下部に表示するのページではdisplay: flexを使っていましたが、display: gridでもフッターを常に最下部に表示させることができます。grid-template-rows: auto 1fr auto;が効いています。
 
2022.12.5 追記
min-height: 100vh;を追加しました!
 
コンテンツは固定幅・背景は画面幅100%へ続く。

【display:grid】フッターを常に最下部に #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #grid #フッター

作者の似顔絵

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

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

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

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

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