100vh比100%更可靠，因其不依赖父元素高度；需清除body默认margin、使用box-sizing: border-box，并注意Safari兼容性及SSR闪动问题。
用 100vh 而不是 100%
直接设 height: 100% 通常无效，因为父元素（比如 body 或 html）没显式高度时，百分比会失效。真正可靠的是视口单位：100vh 表示“100% viewport height”，它不依赖父级高度计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给目标
div设置height: 100vh，无需额外设置html或body - 如果页面有固定头部/底部，改用
calc(100vh - 60px)（把 60px 换成实际占用高度） - 注意 Safari iOS 旧版本对
vh的处理异常（地址栏缩放时值会变），如需兼容可加 JS 回退逻辑
避免滚动条意外出现
即使 div 高度是 100vh，页面仍可能多出滚动条——常见原因是 body 默认有 8px margin，或子元素外边距塌陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 开头加
body { margin: 0; }或更彻底的重置：* { margin: 0; padding: 0; } - 检查该
div是否有border、padding或box-sizing: content-box（默认值），它们会让实际占用高度超过100vh - 稳妥写法：
height: 100vh; box-sizing: border-box;
需要响应式全屏但内容要居中？
全屏 div 常用于登录页、引导页或单页应用主容器，往往还要垂直居中内容。别用 margin-top 算像素，用 Flex 更稳。
实操建议：
立即学习“前端免费学习笔记（深入）”；
display: flex; flex-direction: column; justify-content: center; align-items: center;- 如果内容本身是块级且需撑满高度（比如背景图），加
flex: 1;到子元素 - 避免在
body上直接设 Flex，容易干扰其他布局；只作用于目标div
Vue/React 项目里动态全屏 div 怎么处理？
框架组件中，100vh 依然有效，但要注意：服务端渲染（SSR）时 vh 单位不可用（无视口概念），首次水合后才生效，可能导致闪动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯客户端渲染项目，放心用
100vh - SSR 项目，初始设
min-height: 100vh，再用useEffect或onMounted补全height: 100vh - 若需监听视口变化（比如横竖屏切换），用
window.innerHeight+resize事件，但注意节流
有些场景下 100vh 会被浏览器工具栏遮挡（尤其是移动端 Chrome 地址栏收起时），这时候得靠 JS 动态读取 visualViewport?.height 或监听 resize，但多数常规页面用 100vh 就够了。
