CSS 如何实现 Footer 置底？

Question

CSS 如何实现 Footer 置底？

仓乃文 · Accepted Answer

Footer 置底确保页脚在内容不足时固定在视口底部，内容超出时跟随内容流，通过 Flexbox 或 Grid 可以轻松实现。

Flexbox 方案：
```css
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}
```

Grid 方案：
```css
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
```

传统方案（calc）：
```css
main {
  min-height: calc(100vh - header高度 - footer高度);
}
```

补充说明：
- flex: 1 让 main 占据剩余空间，把 footer 推到底部
- min-height: 100vh 确保 body 至少占满视口
- Grid 方案更直观：header 和 footer 自适应高度，main 占剩余
- 传统 calc 方案需要知道 header 和 footer 的精确高度