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

## 概要

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

![コンテンツが少ない時はフッターが下部に固定されている。コンテンツが多くて、画面からはみ出す時はフッターが下部に固定されない。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/cb1c4f33-de1c-23ee-ae6c-b2f84d1df631.png)

## 方法① gridを使う

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

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

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

参考 🔽

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWPBGow" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/XWPBGow">
  gridを使って使ってフッターを下部固定する</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 方法② flex-grow を使う

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

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

参考 🔽

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwGBRXe" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/VwGBRXe">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 方法③ stickyを使う

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

この方法は [この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック | コリス](https://coliss.com/articles/build-websites/operation/css/clever-sticky-footer-technique.html)で知った方法です。

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

参考 🔽

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLxqwrG" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/yLxqwrG">
  stickyを使って使ってフッターを下部固定する</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 方法④ min-heightを使う

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

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

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

参考 🔽

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLxqwZQ" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/yLxqwZQ">
  min-heightを使って使ってフッターを下部固定する</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>