tailwindcssでヘッダー、フッダーの固定

1651 ワード
tailwindcss tailwindcss テキストリンク

tailwindcssでヘッダー、フッダーの固定するために検討した事項をまとめた。

結論

<body class="bg-blue-500">
    <div class="flex flex-col h-screen">
        <div class="bg-blue-500 sticky top-0">header</div>
        <div class="bg-green-500 flex-grow">
            content<br>(省略)
        </div>
        <div class="bg-blue-500 sticky bottom-0">footer</div>
    </div>
</body>

ポイント

  • flex,flex-colで縦に整列
  • h-screen,flex-growでコンテンツの縦幅がウィンドウより小さいときに広げる
  • sticky top-0でヘッダーを固定
  • sticky bottom-0でフッターを固定（これはお好み。個人的にはコンテンツ縦幅が小さくなるのが嫌なので、要件として求められたときのみ利用する）
  • bodyにヘッダーとフッターの同色を指定（スクロールでヘッダーより上、フッターより下がちらっと見えてしまうため。ヘッダーとフッターを同色にする制約が生まれる）

補足

ヘッダーとフッターの色を分けたい場合もあるかもしれない。以下2つは検討の余地あり。