html页面撑满视口需同时设置html和body的height: 100%并清除默认margin/padding；百分比高度依赖父容器显式高度，100vh更直接但ios safari存在地址栏导致的高度跳变问题，推荐优先使用min-height: 100dvh并兼容fallback。
HTML 页面高度如何撑满整个视口
很多情况下写完页面发现 html 或 body 没有真正“占满屏幕”，下边留白、滚动条异常，或者子元素的 height: 100% 失效。根本原因不是没设高，而是 HTML/CSS 的百分比高度依赖父容器显式定义高度——而默认情况下 html 和 body 的高度是“内容高度”，不是视口高度。
- 必须同时设置
html和body的height: 100%，只设一个没用 - 如果用了
box-sizing: border-box，注意 padding/margin 仍会撑出额外高度 - 遇到 flex 布局时，
min-height: 100vh比height: 100%更可靠（尤其在动态内容场景） -
vh单位在 iOS Safari 中有已知问题：地址栏收放会导致视口高度跳变，100vh可能短一截
html, body {
height: 100%;
margin: 0;
padding: 0;
}为什么 height: 100% 经常不生效
这不是 bug，是 CSS 规范行为：height: 100% 表示“取父容器计算后的高度值”，而如果父容器高度由内容决定（即未显式设置），那百分比就无从算起，最终按 auto 处理。
- 父级没设
height→ 子级height: 100%等同于height: auto -
position: absolute元素若设top/bottom: 0，可绕过百分比限制直接撑满（但脱离文档流） - Flex 容器中，子项设
flex: 1通常比height: 100%更稳妥
100vh 和 100% 在实际项目中怎么选
100vh 是视口单位，直接对应设备可视区域高度；100% 是相对父容器计算的高度。二者语义和行为完全不同。
- 做全屏轮播、登录页背景图、单页应用根容器 → 优先用
min-height: 100vh（留余地，防内容超长） - 做嵌套布局（比如侧边栏 + 主内容区），且主内容需随窗口缩放 → 父容器必须有明确高度（如
height: 100vh），子级才能用height: 100% - SSR 渲染或服务端生成 HTML 时，
vh单位无法被服务端解析，但不影响客户端渲染 - Android Chrome 对
vh支持良好；iOS Safari 在 URL 栏显示/隐藏时会触发视口重算，可能造成短暂错位
移动端 Safari 下 100vh 短一截怎么办
iOS Safari 把地址栏算进视口，但滚动后地址栏收起，100vh 不会自动重算，导致底部露白。这不是代码写错了，是浏览器行为。
立即学习“前端免费学习笔记（深入）”；
- 最小改动：用 JS 动态设置
style="height: ${window.innerHeight}px"，并在resize事件里更新（注意节流） - 更健壮方案：用
min-height: 100dvh（dvh= dynamic viewport height），Chrome 105+、Safari 16.4+ 支持 - 兼容 fallback：先写
min-height: 100vh，再覆盖min-height: 100dvh - 别用
100vh做固定定位遮罩层（如弹窗蒙层），它可能盖不住底部操作栏
真实项目里最常踩的坑，是以为设了 html { height: 100% } 就万事大吉，结果忘了 body 默认有 margin，或者 flex 容器没加 flex-direction: column 就硬塞 flex: 1。这些细节不报错，但就是不撑满。
