【CSS Tips】コンテンツが少ない時は下部に固定されて、コンテンツが増えてきたら下に移動するフッター

概要

要はこんな感じのUI🔽 を実装したい時のCSSの書き方です。

方法① gridを使う

1. header、main、footer要素を用意する
2. bodyにdisplay: gridとgrid-template-rows: auto 1fr autoを指定する

main部分に1frを指定することで、flexboxの時と同じくコンテンツの高さを伸ばしてフッターが画面下部に固定されるようになり、コンテンツ部分が画面内に収まらない時は合わせて下に移動します。

多分この方法が一番シンプル

参考 🔽

See the Pen gridを使って使ってフッターを下部固定する by かべちよ (@kabechiyo13) on CodePen.

方法② flex-grow を使う

1. header、main、footer要素を用意する
2. bodyにdisplay: flexとflex-direction: columnを指定する
3. main要素に、flex-grow: 1を指定する

main要素にflex-grow: 1を指定することで、コンテンツの高さを伸ばしてフッターが画面下部に固定されるようになります。
また、コンテンツ部分が画面内に収まらない時は合わせて下に移動します。

参考 🔽

See the Pen Untitled by かべちよ (@kabechiyo13) on CodePen.

方法③ stickyを使う

1. header、main、footer要素を用意する
2. footerに、top: 100vh;とposition: sticky;を指定する

この方法は この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック | コリスで知った方法です。

top: 100vh;とposition: sticky;を指定することで、コンテンツが少ない時は画面下部に固定しつつ、sticlyを使っていることで前の要素（main要素）に相対配置になるので、コンテンツが増えた時が画面外に移動してくれるという方法です。なるほど...！

参考 🔽

See the Pen stickyを使って使ってフッターを下部固定する by かべちよ (@kabechiyo13) on CodePen.

方法④ min-heightを使う

1. header、main、footer要素を用意する
2. header、footerの高さを指定する
3. main要素に、min-height: calc(100vh - [header-height] - [footer-height])を指定する

main部分に画面の高さからヘッダーとフッターを引いた高さをmin-heightとして指定することで、コンテンツの高さが足りない時は高さが伸び、コンテンツ部分が画面内に収まらない時は合わせて下に移動します。

固定値を使うと、要素に変更があったときや、文字サイズなどを変更しているときに表示崩れの原因になるので、あまりおすすめはできませんがこういう方法もあるよという紹介です。

参考 🔽

See the Pen min-heightを使って使ってフッターを下部固定する by かべちよ (@kabechiyo13) on CodePen.