コンテンツの少ないページでもフッターを下端に表示する

ページの構成はこんな感じにします。

<div class="page-grid">
  <header>header</header>
  <div class="content">content</div>
  <footer>footer</footer>
</div>

あとは、最小でも画面の高さ分の高さがあるグリッドコンテナを用意するだけです。

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

IE 11 に対応する

IE は flex や grid レイアウトと min-height の組み合わせに難があり、上記の CSS ではグリッドコンテナがコンテンツに合わせた高さになってしまいます。

何故かはわかりませんが、さらに flex で囲うことで、このバグを回避できます。

<div class="page">
  <div class="page-grid">
    <header>header</header>
    <div class="content">content</div>
    <footer>footer</footer>
  </div>
</div>

.page {
  display: -ms-flexbox; /* IE のみ flex にする */
}
.page-grid {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
}

上記のコードを IE にも反映させたい場合は grid: autoplace に設定した Autoprefixer を通す必要があります。Laravel Mix を導入すれば、簡単に使うことができます。

面倒な場合は、Autoprefixer の公式がオンラインデモを公開しているので、そちらから変換が可能です。但し Scss の入れ子やコメントには対応していません。

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 2 version
*/

.page {
  display: -ms-flexbox; /* IE のみ flex にする */
}
.page-grid {
  width: 100%;
  min-height: 100vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
  -ms-grid-rows: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
}
.page-grid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.page-grid > *:nth-child(2) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}
.page-grid > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}