スクロールしても上部に残る半透明ヘッダーと、内容が少なくても最下部に付くフッター。ページ全体骨格の実用テンプレートです。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
2つの定番を1つの骨格にまとめています。フッター最下部固定は「全体をflex縦積み＋min-height: 100vh＋本文にflex: 1」の組み合わせで、内容が少ないページでもフッターが浮き上がりません。ヘッダーは position: sticky と top: 0 でスクロール追従し、半透明背景に backdrop-filter: blur() を重ねると、透けた本文がぼけてヘッダーの文字が読みやすくなります。
stickyが効かないときは、祖先のoverflow: hiddenが原因のことが多いです。モバイルではmin-height: 100dvhにするとアドレスバーの伸縮に追従します。
スクロールで上部に残る半透明ヘッダー（position: sticky + backdrop-filter: blur）と、内容が少なくても最下部に付くフッター（flexとmin-height: 100vh）を組み合わせたページ骨格を作ってください。