Tailwind で footer を下に固定する

Tailwind で footer を下に固定する

結構、手薄になりがちなところですが、html もしくは、Next.js や React でページを構成しているときに、Tailwind CSS を使用して header、main、footer でページを分けた場合、コンテンツの高さによって footer が途中で「上がってしまう」問題に悩まされたことはありませんか？この問題は Tailwind の簡単なテクニックで解決できます。

結論として、下記のように親要素に grid レイアウト と lvh を組み合わせることで、PC及びモバイルブラウザに対応したレイアウトを作ることができます。

Footer を下に固定する Tailwind の実装方法

header、main、footer の順にコンテンツが配置されるページで、以下のように grid レイアウトを使用すると、 footer がコンテンツ量に関係なくページの下に固定されるようになります。

React でなく、html で書く場合は以下のように class を指定します。

min-h-[100lvh] はページ全体の高さを確保するために使います。この指定によって、ページの高さが少なくともビューポートの高さ（ 100lvh ）になるように調整されます。

grid-rows-[auto_1fr_auto] は、 header、main、footer の高さの関係を定義しています。 auto でヘッダーとフッターの高さはそれぞれのコンテンツに合わせ、 1fr でメインコンテンツが余ったスペースを占めるようにしています。

なぜ lvh を使うのか？

lvh はビューポートの高さを示す単位です。従来の vh と異なり、モバイルブラウザでの UI 要素（アドレスバーなど）による高さ変動の影響を受けにくいのが特徴です。これにより、ページ全体の高さが安定し、フッターが常にビューポートの下部に表示されることを確保します。

grid-template-rows とは

grid-template-rows は CSS Grid のプロパティで、各行の高さを指定するために使います。この例では、auto 1fr auto という設定で、header と footer がそれぞれの内容に応じた高さを持ち、main が残りのスペースを埋めるようにしています。これにより、メインコンテンツの量が少なくてもフッターはページの最下部に固定されます。

まとめ

Tailwind CSS で footer が上がってしまう問題は、 grid レイアウトと min-h-[100lvh] の組み合わせで簡単に解決できます。 footer が常にページ下部に固定されることで、見た目が安定し、ユーザー体験も向上します。

参考