Webアプリを開発していると、画面いっぱいまで高さを広げたヘッダー/フッター固定のテーブルを作りたいことが結構あります。いままではJavascriptで高さを設定してたりしましたが、tableタグを捨てればCSSグリッドで簡単に実現することができます。

どんなテーブル？

こんなテーブルです。

See the Pen
Header-Scroll-Footer by itmammoth (@itmammoth)
on CodePen.

もちろんブラウザのウィンドウサイズに合わせて高さが伸縮するようになっています。（Javascript不要）

テーブルと言いつつtableタグは使いません。あいつは役立たずです。divを使います。

作成のポイントは２つ。

ひとつは「画面いっぱいまで高さを広げる」ということで、もうひとつは「CSSグリッドを使用する」ということです。

ソース

ソースを見ながら確認します。

◆html

<div class="container">
  <div class="header">
    <div>ヘッダー</div>
  </div>
  <div class="body">
    <div>ボディ</div>
    <div>ボディ</div>
    ...
  </div>
  <div class="footer">
    フッター
  </div>
</div>

HTMLは特に難しいことはしていません。

◆css

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  
  height: calc(100vh - 15px);
}

.body {
  overflow-y: scroll;
}

（色の指定など、この記事の主旨と関係のない部分は省略しています）

すごくシンプルですが、これだけでこのテーブルは実現できます。

ではポイントを抑えておきます。

画面高さ一杯はvh

.containerの高さ指定が次のようになっています。

height: calc(100vh - 15px);

100vhとありますが、vhはView Heightの略です。100は100%ということです。つまり100vhは「ビューポートの高さ一杯」という意味になります。基本的には画面一杯になると思います。

calcで15px引いているのはpadding代わりですね。本当に画面一杯にしたい場合は、単に100vhでいいと思います。

残り全部は1fr

次にCSS Gridの方を見ていきます。

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;

css gridを使用する場合は display: grid; を指定します。そして grid-template-rows でrow（行）に対する高さ設定をします。３つの要素が指定されていますが、これは次のように対応しています。

1. auto => ヘッダー
2. 1ft => ボディ部分
3. auto => フッター

gridに慣れていない方は「なんでそうなるの？」と思うかもしれませんが、これにはhtmlのDOMの構造に関係があります。

DOM構造を見てみましょう。

<div class="container">
  <div class="header">
    ...
  </div>

  <div class="body">
    ...
  </div>

  <div class="footer">
    ...
  </div>
</div>

display: grid であるcontainerの直下には３つのdivがあるのが分かると思います。これが先程のgrid-template-rowsの指定に対応しているというわけです。

CSS Gridには他にも様々な機能がありますので、気になる方は色々とググってみてくださいね。

さて、３つのdivにそれぞれ auto, 1fr, auto が対応していることが分かりましたが、この指定値が何を表しているか見てみます。

autoはMDNでは次のように説明されています。

値に auto を使うと、この行のセルがコンテンツのサイズに応じて空間が引き伸ばされ、その高さに合わせられます。

続いて、1frですが、これはflex型という伸縮指定です。他にfrを使用していない場合は1frが「残り全部」となります。

残り全部なのでoverflow指定してやると、スクロール範囲になるわけですね。

overflow-y: scroll;

という感じです。

今回は100vhで画面一杯にしましたが、もちろんpx指定や、親要素に合わせた%指定でも大丈夫です。

とっつきにくイメージのCSS Gridですが、覚えておいて損はないと思います。ぜひ覚えましょう！

参考

• MDN – CSS グリッドレイアウト

関連する記事

• ヘッダー固定でtbodyスクロール可・td幅残り全部のテーブルをサクッと作る
• How to keep scroll position after refreshing in AngularJS
• Rails + simple_form + Foundation 5 チュートリアル
• 【Marionette】CompositeViewをCollectionViewで描画するサンプル
• jquery-ui.sortableでドラッグ中の要素の位置がおかしくなる