CSSでフッターの下に隙間ができないようにメインコンテンツの高さを調整する

メインコンテンツの高さが足りなくてもフッターが中途半端な位置に来ないようにしたい

Webアプリケーションのレイアウトで、①ヘッダー②メインコンテンツ③フッターの3つで構成するというパターンはよくあると思うんですが、
👇 こんな感じでフッターの下に中途半端な隙間を作りたくないですよね。

これは困る

👇 メインコンテンツの高さが短くても、フッターがぴったりビューポートの下にくっつくようにしたいですよね。

良いね

👇 ただ、フッターが常に下に固定されているのではなくて、メインコンテンツがビューポートより高くなったときには、フッターは下にずれていってほしいんですよね。

良いね

gridを使うと簡単

自分はこれをずっとflexで実現していたのですが、（メインコンテンツの）孫要素の高さを100%にしたいときなんかに色々ややこしくて、gridを使うのがいちばん楽だなーという結論に至りました。gridはすでにブラウザ対応を気にせず使えるCSSプロパティだと思います。

HTML

<div class="container">
  <header>ヘッダー</header>
  <main>メインコンテンツ</main>
  <footer>　フッター</footer>
</div>

HTMLをこのように組むとして、CSSを以下のように指定します。

CSS

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

TailwindCSSを使う場合

<div class="grid grid-rows-[auto_1fr_auto] grid-cols-[100%] min-h-screen">
  <header>ヘッダー</header>
  <main>メインコンテンツ</main>
  <footer>　フッター</footer>
</div>

これでこの画像のようなレイアウトが実現できます。

grid-template-rowsの値をauto 1fr autoとすることで、ヘッダーとフッターの高さを除いた残りの部分をメインコンテンツ部分で埋めるようなレイアウトになります。ちなみにヘッダーが存在しない場合（メインコンテンツとフッターだけの場合）は1fr autoとすればOKです。

min-height: 100vhはヘッダー・フッター・メインの3つを囲む要素の高さを、ビューポートより大きくするために必要です。

grid-template-columns: 100%が必要な理由はコメントで教えてもらいました。クラクさん、ありがとうございます。

それにしてもgridが心置きなく使える時代になったのは本当に嬉しいですね。