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つは検討の余地あり。
-
javascriptでスクロール時にBackgroundの色を変更する
https://teratail.com/questions/28440 -
linear-gradientを利用してBackgroundを2色にする(Tailwindはこれに対応していない)
https://qiita.com/C-3PHobbit/items/1b53d5dd792111ed5a78