【CSS】 ウィンドウが大きい時だけフッターを下部に追従させる（grid編）

こんにちは、さち です。

以前、ウェブサイトを作る時に、CSS だけで「フッター」をウィンドウの下部に追従する（貼り付くようにする）方法についての記事を書きました。

当時は display: flex;（フレックスボックス） を使った方法でしたが、今回は display: grid;（グリッドレイアウト） を使った方法を紹介します。

個人的には、「グリッドレイアウト」の方がシンプルで分かりやすいと思います。

サンプル・完成予想図

このような HTML を準備しました。

<div id="wrapper">
  <header>header</header>
  <main>
    ここから<br>
    main<br>
    ここまで<br>
  </main>
  <footer>footer</footer>
</div>

ウィンドウのサイズがページの全長より大きい時に、「フッター（footer）」がウィンドウの下部に追従するようにしてみましょう。

イメージとしてはこんな感じ。（ウィンドウのサイズの変化を再現するため、body の高さを動かしています）

ウィンドウのサイズがページの全長（ header，main，footer の高さの合計値）より大きくなると、「フッター」がウィンドウの下部に追従します。

逆に、ウィンドウのページの全長より小さくなると、「フッター」は「メイン」のデフォルトの高さで止まり、ウィンドウにスクロールバーが表示されます。

これを CSS だけで実装してみましょう。

ちなみに、position: sticky; ではできません。（「スクロール」に追従する機能なので、ウィンドウサイズに合わせたい今回とは異なる）

「グリッドレイアウト」を使って解決

フレックスボックスは、display: grid; を記述することで利用できます。

これを適用した要素は「グリッドレイアウト」となり、直下の子要素は幅・高さが連動して整列されるようになります。

実際にグリッドレイアウトを使って「フッター」をウィンドウ下部に追従させてみましょう。

CSS

CSS はこんな感じ。

html, body, #wrapper {
  width: 100%;
  height: 100%;
}

#wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  background-color: red;
  height: 40px;
}

main {
  background-color: orange;
}

footer {
  background-color: green;
  height: 40px;
}

解説

とりあえずできれば良いという人は、前述の CSS をコピペして使うだけでOKです。

「グリッドレイアウト」の仕組みや挙動を理解したい人は、ここから先も読んでみて下さい。

「行」の高さを指定

「グリッドレイアウト」では、「行」と「列」に並んでいる「子要素」のサイズを指定できます。

「行」の高さは grid-template-rows 、「列」の幅は grid-template-columns で調整します。（今回必要なのは「行」なので grid-template-rows を使っています）

例えば、display: grid; である「親要素」に grid-template-rows: auto 1fr; を設定したとします。

この状態で「親要素」の高さが変わると、1行目の「子要素」の高さはデフォルトのまま、2行目の「子要素」の高さは「親要素」に合わせて伸び縮みします。

この機能を使って「メイン」だけを伸び縮みさせることで、「フッター」を常に下部に追従させることができます。

CSS の詳細

#wrapper に設定した grid-template-rows: auto 1fr auto; によって、2行目の要素である main の高さだけが伸び縮みします。

#wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header footer の高さはデフォルトのまま変わらず、main だけが伸びることで、「フッター」がウィンドウ下部に追従してくれます。

関連記事

この記事と同じ内容を「フレックスボックス」で実装する方法です。

【CSS】 ウィンドウが大きい時だけフッターを下部に追従させる（flex編）

こんにちは、さち です。今回は、ウェブサイトを作る時に、CSS だけで「フッター」をウィンドウの下部に追従する（貼り付くようにする）方法について書いていきます。常に追従するのは簡単です。しかし、ウィンドウのサイズが大きい時だけに限定しようと

at.sachi-web.com

2019.07.08