用vh实现全屏布局高度不对，根本原因是vh按视口高度计算，而移动端地址栏动态缩放导致100vh不等于真正可见全高；推荐优先用min-height:100vh，或升级为兼容性更好的100dvh并提供vh降级。
用 vh 实现全屏布局时，为什么高度总是不对？
直接写 height: 100vh 看似合理，但实际常出现滚动条、内容被截断或顶部留白——根本原因是 vh 按视口（viewport）高度计算，而地址栏、工具栏在移动端会动态缩放视口，导致 100vh 在 Safari iOS 或 Chrome Android 上不等于“真正可见全高”。
实操建议：
- 优先用
min-height: 100vh替代height: 100vh，避免内容超长时被强制裁剪 - 若需严格撑满且无滚动，加
overflow: hidden到和，但注意这会禁用所有滚动，慎用于含长内容的页面 - 在 iOS Safari 中，地址栏收起后视口变化，可监听
resize事件并重设高度，但更稳的方式是改用dvh（见下一条）
dvh 是什么？比 vh 好在哪？
dvh（dynamic viewport height）是 CSS 新增单位，专为解决移动端视口动态变化问题设计。它始终代表“当前可见区域高度”，不受地址栏伸缩影响。
使用条件和注意事项：
立即学习“前端免费学习笔记（深入）”；
- 仅支持较新浏览器：Chrome 105+、Firefox 106+、Safari 16.4+；旧版 Safari（如 iOS 16.3 及更早）不识别，会回退到
vh - 推荐写法：
height: 100dvh，同时提供降级：height: 100vh; height: 100dvh;（后者覆盖前者） - 不要混用
vh和dvh计算同一布局中的不同元素，否则在切换设备状态时可能错位
全屏布局中，margin 和 padding 会影响 vh 效果吗？
会。块级元素默认有 margin（如 的上下 margin），即使设了 height: 100vh，外边距仍会把内容推出视口，造成滚动或空白。
必须清理的几处：
-
body { margin: 0; }—— 浏览器默认值不统一，必须显式归零 -
html, body { height: 100%; }—— 若父容器没高度，100vh子元素可能失效（尤其嵌套 flex 布局时） - 检查是否有未重置的
padding，比如某些 UI 框架给<main></main>加了内边距，会压缩可用高度
Flex 布局 + vh 全屏，为什么子元素不占满？
常见于 display: flex 容器设了 height: 100vh，但子项用 flex: 1 后仍不撑开——问题往往出在父级没设 flex-direction: column 或子项未设 min-height: 0（flex 项默认 min-height: auto，会阻止收缩）。
可靠写法示例：
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header { height: 60px; }
.main {
flex: 1;
min-height: 0; /* 关键：允许 flex 项收缩到底 */
}如果用 Grid 更简单：grid-template-rows: 60px 1fr，无需担心 min-height 问题。
复杂点在于混合使用固定高度组件（如 header）和动态内容时，vh 值要手动减去固定值（如 calc(100vh - 60px)），而 dvh 无法参与 calc 运算（目前规范限制），这点容易被忽略。
