粘性页脚

当内容较短时，页脚粘在底部；当内容增长时，页脚自然向下移动。

┌────────────────────────────┐
│ Header                     │
├────────────────────────────┤
│ Content (flex: 1)          │
├────────────────────────────┤
│ Footer                     │
└────────────────────────────┘

关键规则

• 父元素: flexDirection: column
• 页面高度为 auto，用 minHeight 设置视口的最小高度
• 内容: flexGrow: 1

代码

相关指南

• Flex 伸缩
• 尺寸