当使用 Flex 布局时，仅设置 html, body { min-height: 100% } 无法确保 body 占满整个视口，因百分比高度依赖父容器（html）的计算高度，而 html 默认无明确高度约束；推荐使用 min-height: 100dvh 直接锚定视口单位，彻底解决底部留白问题。
当使用 flex 布局时，仅设置 `html, body { min-height: 100% }` 无法确保 body 占满整个视口，因百分比高度依赖父容器（html）的计算高度，而 html 默认无明确高度约束；推荐使用 `min-height: 100dvh` 直接锚定视口单位，彻底解决底部留白问题。
在构建全屏垂直布局（如多步表单、单页应用）时，常见需求是让
完全填满用户当前浏览器窗口高度，从而避免页脚下方出现意外空白——正如截图中 footer 底部残留的红色边框外空白所示。问题根源在于：CSS 中 height: 100% 或 min-height: 100% 是相对长度单位，它要求父元素（即 ）必须具有明确的高度值才能生效；而默认情况下， 的高度由其内容决定，并非天然等于视口高度。虽然你已为 html 和 body 设置了 min-height: 100%，但由于 html 自身未被赋予可计算的高度基准，该声明实际失效。同时，body 启用了 display: flex; flex-direction: column，这本身不会导致留白，但会放大高度计算不准确带来的视觉影响——子元素（如 .form-step 和 .footer）按 flex 分配空间时，若容器总高度不足视口，就会在底部露出背景色或产生滚动条。
✅ 推荐解决方案：使用视口单位 dvh（dynamic viewport height）
body {
min-height: 100dvh; /* ✅ 推荐：始终等于当前视口可用高度 */
display: flex;
flex-direction: column;
/* 其他原有样式保持不变 */
}
? 100dvh 表示“100% 动态视口高度”，它会自动排除地址栏、工具栏等可能遮挡页面的 UI 元素（尤其在移动端 Safari 中表现更稳定），相比旧式 100vh 更可靠。
? 补充优化建议（确保布局健壮）：
- 移除 html, body { min-height: 100% }，避免冗余或冲突；
- 为 html 显式添加 height: 100%（非必需，但有助于兼容极少数旧环境）；
- 若 .form-step 需占据剩余空间，请保留 flex: 1，并确认其父容器（body）已具备确定高度；
- 检查是否有未重置的默认 margin（例如
、
），尽管你已全局重置 * { margin: 0 }，仍建议对语义化标题做二次验证。
✅ 最终精简有效的 CSS 片段如下：
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100dvh; /* 关键修复 */
display: flex;
flex-direction: column;
background: #4ac29a;
font-family: 'Poppins', sans-serif;
border: 1px solid red; /* 仅用于调试，上线前可移除 */
}
.form-step {
flex: 1;
margin-bottom: 20px;
/* 其余样式保持不变 */
}
.footer {
padding: 15px;
background-color: beige;
}
? 注意事项：
- dvh 是较新的 CSS 单位（Chrome 105+、Firefox 110+、Safari 16.4+ 支持），如需兼容更老浏览器（如 iOS body { min-height: 100vh; /* 回退方案 */ min-height: 100dvh; /* 主力方案，现代浏览器覆盖上一行 */ }
- 切勿对 body 设置 height: 100dvh（而非 min-height），否则内容超长时将截断或隐藏溢出部分。
通过这一调整，.footer 将自然贴合视口底边，Flex 子项高度分配也将准确响应可用空间，彻底消除底部多余空白。
