本文详解如何通过 flexbox 实现视口内顶部与底部的精准对齐，重点解决 `min-height: 100%` 失效、滚动异常及默认边距干扰等常见陷阱，并提供可直接运行的健壮方案。

要让一个元素贴顶、另一个贴底（且不依赖 position: absolute 或 fixed），Flexbox 是最语义化、响应式友好的方案——但必须满足三个关键前提：

✅ 正确设置容器高度基准

min-height: 100% 在

body {
  min-height: 100vh;
  margin: 0; /* 移除浏览器默认 8px 外边距，避免触发垂直滚动条 */
}

⚠️ 注意：若遗漏 margin: 0，即使 100vh 也会因默认外边距导致内容溢出，出现不必要的滚动条。

✅ 使用 justify-content: space-between 实现两端对齐

当 flex-direction: column 时，space-between 会将第一个子元素推至容器顶部，最后一个子元素推至底部，中间元素均匀分布（若存在）。无需为 .top 设置 flex-grow: 1，也无需给 .bottom 加 margin-top: auto——这些反而会破坏布局逻辑：

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 核心！ */
}

✅ 清除默认样式干扰

标签默认带有 margin: 1em 0，会在顶部/底部额外增加空白，导致视觉错位。建议重置或显式控制：

p {
  margin: 0; /* 消除默认上下边距 */
}
/* 或更稳妥地全局重置（开发阶段推荐） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

✅ 完整可运行示例

  
  
  



  
✅ 顶部元素
  
✅ 底部元素

? 补充说明：滚动场景下的行为

此方案适用于静态内容布局（即页面总高度 ≤ 视口高度）。若内容超出视口（如添加大量中间内容），.bottom 会被自然推至文档流末尾，不再固定在视口底部——这是 Flexbox 的预期行为，而非 bug。此时若需真正“始终可见”的悬浮效果（如底部导航栏），应改用 position: fixed：

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

✅ 总结：Flexbox 的 space-between + 100vh 是实现视口级两端对齐的黄金组合；清除默认样式、避免冗余声明（如 flex-grow）、理解 vh 与 % 的本质区别，是成功落地的关键。