在 iPad 版 Chrome（iOS/iPadOS）中，100vh 常因浏览器对视口高度的错误计算而超出实际屏幕，引发多余滚动条；本文提供兼容 Safari 且稳定适配 Chrome 的 CSS 修复方案。
在 ipad 版 chrome（ios/ipados）中，`100vh` 常因浏览器对视口高度的错误计算而超出实际屏幕，引发多余滚动条；本文提供兼容 safari 且稳定适配 chrome 的 css 修复方案。
iPad 上 Chrome 浏览器（尤其是基于 WebKit 的 iOS 版 Chrome）对 vh 单位的解析存在已知偏差：它会将地址栏、工具栏等 UI 元素收起/展开时的动态高度变化纳入 100vh 计算，导致 100vh 实际值大于可视区域（有时接近 200vh），从而触发垂直滚动条——即使页面内容仅需一屏。
你提供的 HTML 结构本身无误，但问题根源在于以下两点：
- -webkit-fill-available 的副作用：该非标准属性本意是填充「可用视口」，但在 iPad Chrome 中与 100vh 混用时易引发高度叠加或重复计算；
- html 和 body 的高度继承链断裂：若未显式设置 html { height: 100% }，body { height: 100vh } 可能因父容器未设高而失效，Chrome 表现尤其不稳定。
✅ 推荐的渐进式修复方案如下（按优先级排序）：
方案一：精简声明，回归标准行为
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
<div style="background-color: green; height: 100%; width: 100%;">This is a div</div>
✅ 优势：完全符合 CSS 规范，Safari、Chrome、Firefox 均一致；避免 -webkit-fill-available 的不确定性。
方案二：强制 100vh + 重置默认边距
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
⚠️ 注意：仅当必须使用 vh（如全屏动画、Canvas 渲染）时采用；需确保无其他元素引入外边距或滚动上下文。
方案三（进阶）：Chrome iOS 特定修复（慎用）
若项目需精细控制且上述方案仍偶发异常，可借助 WebKit 媒体查询定向修复：
/* 仅作用于 WebKit 内核的 iOS Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (device-width: 834px) {
/* 匹配 11-inch iPad Pro 宽度 */
html, body {
height: 100%;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (device-width: 1024px) {
/* 匹配 12.9-inch iPad Pro */
html, body {
height: 100%;
}
}
? 关键注意事项：
- 移除所有 min-height: -webkit-fill-available 相关声明——它在 iPad Chrome 中是主要诱因；
- 确保 无默认 margin（Chrome 有时保留 8px），建议全局重置；
- 避免在 body 上直接写内联样式（如 style="height: 100vh"），应统一由 CSS 控制以保证层叠逻辑清晰；
- 测试时务必在真机上操作：模拟器无法复现 iPadOS 地址栏动态高度行为。
最终验证：移除 min-height: -webkit-fill-available，改用 html, body { height: 100% } 后，绿色区块将严丝合缝填满整个可视区域，滚动条彻底消失，且在 Safari、Chrome、Edge（iOS）中表现完全一致。
