スティッキーフッター（コンテンツ短くてもフッターは下）
本文が短いページでも、フッターを必ず画面の一番下に張り付かせる定番レイアウトです。ページ全体のラッパーに min-height:100vh と display:flex; flex-direction:column を指定し、ヘッダー・本文・フッターを縦に積みます。
解説
本文が短いページでも、フッターを必ず画面の一番下に張り付かせる定番レイアウトです。ページ全体のラッパーに min-height:100vh と display:flex; flex-direction:column を指定し、ヘッダー・本文・フッターを縦に積みます。そのうえで本文（main）にだけ flex:1 を与えると、本文が余った縦スペースを吸って伸びるため、コンテンツが少なくてもフッターが中途半端に浮かず画面下へ落ち着きます。position:fixed ではないので本文を覆い隠す心配もありません。
使う場面
- 404 ページや問い合わせ完了など、内容が短くなりがちな画面
- 管理画面・ダッシュボードの土台レイアウト
- コンテンツ量がページごとに大きく変わるサイト全般
長い本文のときは flex:1 の本文が自然に伸び、フッターはその下に続くので通常のページと同じ見え方になります。BEM 風に page__head page__main page__foot と命名してあり、構造が読み取りやすいのも特徴です。注意点として、flex:1 を付け忘れると短いページでフッターが中央付近に浮いてしまいます。min-height:100vh はラッパーに付けるのが正しく、body 側に余白が残ると微妙なズレが出ることがあります。
使用例・適したシーン
- コーポレートサイトの基本構造
- シングルページサイトの土台
よくある質問
position:fixed のフッターと何が違いますか
fixed は常に画面に貼り付き本文に重なりますが、この方法は本文が短いときだけ下に押し下げ、長いときは本文の下に普通に続きます。重なりや余白の心配がなく、本来のフッターらしい挙動になります。
フッターが下に行かないときの原因は
本文（main）に flex:1 が付いていない、ラッパーに min-height:100vh と flex-direction:column が揃っていないことがほとんどです。この3点が正しく入っていれば短いページでも下に固定されます。