CSS3：Gridレイアウトで簡単に作れるモバイル用レイアウト

一昔前はヘッダーやフッターの固定にCSSやJavaScriptでやたら工夫が必要でしたが、今はGrid一つで簡単・安全にできます。

HTML

<div class="grid">
  <header>header</header>
  <main>
    <section> 
      ...
    </section>
    ...
  </main>
  <footer>footer</footer>
</div>

大枠を .grid が覆う、ごく簡単なHTMLです。

main内がスクロール対象のコンテンツになります。

CSS

.grid {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px auto 50px;
}

...

main {
  overflow: auto;
  ...
}

CSSの要の部分もこれだけです。

全体を覆う .grid は height: 100vh で常に画面の高さピッタリ合うようになります。
grid-template-rows でヘッダー、フッターの高さを50pxとし、 main は auto の可変幅にしています。

あとは main に overflow: auto を付けるだけでコンテンツ量に応じてスクロールが発生します。

カスタマイズも楽

サンプル表示では適用させていませんが、下記のカスタマイズコードもあります。

/* カスタマイズコード */
//フッターを消す
.grid.hide-footer {
  grid-template-rows: 50px auto 0px;
}
.grid.hide-footer footer {
  display: none;
}

レイアウトを崩さずフッターだけを消せます。

注意として、ある行を消す時に grid-template-rows は 0px を指定した方がよいと考えています。

上記サンプルはフッターを消すので0pxにせず直接消しても良いですが、ヘッダーを消す場合は 0px で指定しないと main が50px、 footer がautoとズレてしまうので、意識的に0pxを使ったほうが良いと考えます。