能，但需配合html和body高度约束才可靠；100vh在iOS Safari地址栏收放或Android Chrome滚动时会失准，推荐用100dvh或Flex布局替代。
vh 单位在 HTML5 布局中到底能不能直接用？
能，但必须配合 html 和 body 的高度约束才可靠。浏览器默认不把 html 或 body 当作视口容器，100vh 在某些场景下会超出预期——比如 iOS Safari 地址栏收放时触发重排，或 Android Chrome 滚动后 vh 未实时更新。
为什么给 div 设置 height: 100vh 还是没占满屏幕？
因为父级（通常是 body 和 html）没有显式高度，导致百分比/视口单位失去参照。CSS 中 vh 虽基于视口，但元素若处于「普通流」且父容器未设高，渲染引擎可能按内容高度计算而非视口。
-
html, body { height: 100%; margin: 0; }是基础前提 - 若使用 Flex 布局，
body { display: flex; flex-direction: column; }后，子元素height: 100vh可能被 flex 容器压制，此时应改用flex: 1或min-height: 100vh - 移动端需防 iOS Safari 地址栏遮挡：用
min-height: 100vh替代height: 100vh更稳妥
如何让 header + main + footer 精确撑满视口且不滚动？
纯 vh 加减容易因边框、内边距导致溢出。推荐用 Flex + flex: 1 组合，避免数值计算误差。
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
height: 60px;
}
main {
flex: 1;
overflow-y: auto;
}
footer {
height: 40px;
}
这样 main 自动填满剩余空间，不受 vh 动态变化影响，也规避了 iOS 滚动时 100vh 缩水的问题。
立即学习“前端免费学习笔记（深入）”；
有没有比 vh 更稳定的全屏方案？
有，但要看场景。CSS intrinsic size（如 100dvh）才是现代解法——dvh（dynamic viewport height）专为解决地址栏动态变化设计，目前已在 Chrome 105+、Safari 16.4+、Firefox 114+ 支持。
- 替换
height: 100vh→height: 100dvh - 兼容 fallback：用
@supports (height: 100dvh)包裹新写法，旧浏览器回退到100vh - 注意：SSR 或服务端渲染时，
dvh无法被预计算，首屏仍可能闪动，需结合 JS 检测或服务端 UA 判断
真正麻烦的不是写法，而是当你要兼容微信内置浏览器（基于旧版 X5 内核）或 QQ 浏览器时，dvh 根本不识别，这时候还是得靠 JS 动态设置 style.height = window.innerHeight + 'px' 并监听 resize，而且要防抖。
