如何使用 Flexbox 将元素精准固定在视口顶部和底部

本文详解如何通过 flexbox 实现视口级垂直分布：让一个元素贴顶、另一个贴底，无需绝对定位；关键在于正确设置容器高度（`100vh`）、清除默认边距，并利用 `justify-content: space-between`。

要实现「顶部固定 + 底部固定」的视觉效果（非 position: fixed，而是基于 Flexbox 的流式布局），核心在于将容器撑满整个视口高度，并让其子元素在主轴（垂直方向）上自动分配空间。

✅ 正确做法：三步到位

1. 确保容器高度为视口全高
   body { min-height: 100% } 是无效的——因为 % 高度依赖父容器，而 html> 默认无显式高度，导致 body 实际高度仅由内容决定。应改用 min-height: 100vh（viewport height），强制 body 至少占满整个视口。

2. 清除默认边距与内边距干扰
   浏览器对

   默认添加约 8px 外边距（margin），这会导致内容溢出并触发滚动条。同时

   标签自带 margin: 1em 0，也会造成意外间距。因此需显式重置：

   body {   margin: 0; } p {   margin: 0; /* 或根据设计保留适当间距 */ }

3. 用 justify-content: space-between 替代手动 flex-grow 或 margin-top: auto
   当 flex-direction: column 时，space-between 会将第一个子元素推至容器顶部，最后一个子元素推至底部，中间元素均匀分布（若存在）。这比手动设置 flex-grow 或 margin-top: auto 更简洁、可靠，且无需额外类名干预。

✅ 完整可运行示例

                
✅ 顶部元素
   
? 中间内容（可选）
   
✅ 底部元素
  

⚠️ 注意事项与常见误区

• 不要滥用 flex-grow: 1 或 margin-top: auto：在仅有两个子元素时，它们看似可行，但一旦插入新元素或内容动态变化，布局极易失控；justify-content: space-between 是语义更清晰、鲁棒性更强的标准方案。
• 100vh vs 100%：务必使用 100vh。100% 在无显式父高时退化为 auto，无法撑满视口。
• 滚动行为说明：此方案是静态视口分布——当页面内容超出视口（如 .middle 过长），.bottom 会随文档流下移，不再“贴底”。若需始终可见的悬浮底栏，应改用 position: fixed; bottom: 0，但这已不属于 Flexbox 布局范畴。
• 移动端兼容性：100vh 在部分 ios safari 版本中可能因地址栏缩放产生偏差，如需极致兼容，可配合 javaScript 动态设置高度，但多数现代项目中 100vh 已足够稳定。

掌握这三个要点（100vh + margin: 0 + justify-content: space-between），你就能干净、可维护地实现 Flexbox 视口级垂直锚定——无需 hack，不依赖绝对定位，真正发挥 Flexbox 的声明式布局优势。