LoginSignup
8
6

More than 3 years have passed since last update.

@gugen_sakai(ryo)

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

Posted at

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>

image.png

ポイント

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

補足

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

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
6