React + Tailwind CSSでフッタの位置を画面の最下部に固定する方法のメモ

これはなに

React + Tailwind CSSでフッタの位置を画面の最下部に固定する方法のメモ。

なにをつくるか

フッタの位置を画面の最下部に固定する。何もしないと、メインコンテンツが少ないときに。フッタが最下部よりも上に表示されてしまう。それを防ぐ。

この実装のことを"Sticky footers"と呼ぶらしい。

やり方

下記サイトが参考になった。

Sticky footers - CSS: Cascading Style Sheets | MDN

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height. We'll look at a couple of techniques for creating one in this recipe.

developer.mozilla.org

Grid Layoutを使う

Grid Layoutを使って、フッタを画面の最下部に固定する。コンテンツをラップするdiv要素を作成し、その最小の高さを設定する。そして、gridを指定し、grid-template-rowsでauto 1fr autoを指定する。

src/App.tsx

import React from 'react';

function App(): React.JSX.Element {
  return (
    <>
      <div
        className={[
          'w-full max-w-[100vw]',
          'min-h-[100svh] h-[100svh]',
          'grid grid-rows-[auto_1fr_auto]',
        ].join(' ')}
      >
        <header>header</header>
        <main>main</main>
        <footer>footer</footer>
      </div>
    </>
  );
}

これにより、ヘッダとフッタがautoの高さを持ち、メインコンテンツが残りの高さを持つようになる。

Flexboxを使う

Grid Layoutに対応していないブラウザを対象とする場合は、Flexboxを使う方法もある。コンテンツをラップするdiv要素を作成し、その最小の高さを設定する。そして、flexを指定し、flex-colを指定する。加えて、main要素にflex-1を指定する。

src/App.tsx

import React from 'react';

function App(): React.JSX.Element {
  return (
    <>
      <div
        className={[
          'w-full max-w-[100vw]',
          'min-h-[100svh] h-[100svh]',
          'flex flex-col',
        ].join(' ')}
      >
        <header>header</header>
        <main className="flex-1">main</main>
        <footer>footer</footer>
      </div>
    </>
  );
}

これにより、メインコンテンツがヘッダとフッタの間の高さを持つようになる。

この方法は、毎回flex-1を指定する必要があるため、Grid Layoutを使う方法のほうが簡潔である。

参考文献・URL

Sticky footers - CSS: Cascading Style Sheets | MDN

developer.mozilla.org