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

テクノロジーカテゴリーの変更を依頼記事元:

qiita.com/gugen_sakai

2users がブックマークコメント

コメント

0

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

関連記事

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

<body class="bg-blue-500"> <div class="flex flex-col h-screen"> <div class="bg-blue-500 sticky to... <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でフッターを固定（これはお好み。個人的にはコンテンツ縦幅が小さくなるのが嫌なので、要件として求められた

ブックマークしたユーザー

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

いま人気の記事 - 企業メディア

企業メディアをもっと読む

設定を変更しましたx