スティッキーフッター
コンテンツが短い場合、フッターは下部に固定されます。コンテンツが増えると、フッターは自然に下に移動します。
┌────────────────────────────┐ │ Header │ ├────────────────────────────┤ │ Content (flex: 1) │ ├────────────────────────────┤ │ Footer │ └────────────────────────────┘
主要なルール
- 親:
flexDirection: column - 親の高さ:
auto、minSize.heightはビューポートの高さ - コンテンツ:
flexGrow: 1 - ヘッダー、コンテンツ、フッター:
flexShrink: 0
コード
Loading Preview…
この空のコンテンツではフッターの y は 250 です。コンテンツの高さを 400 にすると、ページは 520、フッターの y は 470 になり、内容を押し縮めずに下へ伸びます。この例は Flexbox による配置で、CSS の position: sticky を実装するものではありません。