本文详解如何通过 flexbox 实现视口内顶部与底部的精准对齐，重点解决 `min-height: 100%` 失效、滚动异常及默认边距干扰等常见陷阱，并提供可直接运行的健壮方案。
要让一个元素贴顶、另一个贴底（且不依赖 position: absolute 或 fixed），Flexbox 是最语义化、响应式友好的方案——但必须满足三个关键前提：
✅ 正确设置容器高度基准
min-height: 100% 在
上无效，因为百分比高度需依赖父容器有明确高度；而 html> 默认无高度约束。正确做法是使用 min-height: 100vh（viewport height），强制 body 至少占满整个视口：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;
}✅ 完整可运行示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flexbox 顶部底部对齐</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.top, .bottom {
padding: 1.5rem;
background: #4a6fa5;
color: white;
text-align: center;
}
.bottom {
background: #6b8e23;
}
</style>
</head>
<body>
<div class="top"><p>✅ 顶部元素</p></div>
<div class="bottom"><p>✅ 底部元素</p></div>
</body>
</html>? 补充说明：滚动场景下的行为
此方案适用于静态内容布局（即页面总高度 ≤ 视口高度）。若内容超出视口（如添加大量中间内容），.bottom 会被自然推至文档流末尾，不再固定在视口底部——这是 Flexbox 的预期行为，而非 bug。此时若需真正“始终可见”的悬浮效果（如底部导航栏），应改用 position: fixed：
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}✅ 总结：Flexbox 的 space-between + 100vh 是实现视口级两端对齐的黄金组合；清除默认样式、避免冗余声明（如 flex-grow）、理解 vh 与 % 的本质区别，是成功落地的关键。
