本文详解如何通过 flexbox 实现视口级垂直分布：让一个元素贴顶、另一个贴底，无需绝对定位；关键在于正确设置容器高度（`100vh`）、清除默认边距，并利用 `justify-content: space-between`。
要实现「顶部固定 + 底部固定」的视觉效果（非 position: fixed，而是基于 Flexbox 的流式布局），核心在于将容器撑满整个视口高度，并让其子元素在主轴（垂直方向）上自动分配空间。
✅ 正确做法：三步到位
确保容器高度为视口全高
body { min-height: 100% } 是无效的——因为 % 高度依赖父容器，而 <html> 默认无显式高度，导致 body 实际高度仅由内容决定。应改用 min-height: 100vh（viewport height），强制 body 至少占满整个视口。-
清除默认边距与内边距干扰
浏览器对 <body> 默认添加约 8px 外边距（margin），这会导致内容溢出并触发滚动条。同时 <p> 标签自带 margin: 1em 0，也会造成意外间距。因此需显式重置：body { margin: 0; } p { margin: 0; /* 或根据设计保留适当间距 */ } 用 justify-content: space-between 替代手动 flex-grow 或 margin-top: auto
当 flex-direction: column 时，space-between 会将第一个子元素推至容器顶部，最后一个子元素推至底部，中间元素均匀分布（若存在）。这比手动设置 flex-grow 或 margin-top: auto 更简洁、可靠，且无需额外类名干预。
✅ 完整可运行示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flexbox 顶部/底部对齐</title>
<style>
* { outline: 1px dashed #ccc; } /* 调试用：显示边界 */
body {
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
/* 不需要设置 align-items（水平居中可选） */
}
.top, .bottom {
padding: 1rem;
background: #4a90e2;
color: white;
text-align: center;
}
.bottom {
background: #e74c3c;
}
/* 可选：中间插入内容时自动填充中间区域 */
.middle {
padding: 1rem;
background: #ecf0f1;
text-align: center;
}
</style>
</head>
<body>
<div class="top"><p>✅ 顶部元素</p></div>
<div class="middle"><p>? 中间内容（可选）</p></div>
<div class="bottom"><p>✅ 底部元素</p></div>
</body>
</html>⚠️ 注意事项与常见误区
- 不要滥用 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 的声明式布局优势。
