iPad Pro端Chrome浏览器100vh高度异常问题咨询

问题场景 #

设备：11英寸iPad Pro，iPadOS 16.6.1，Chrome版本116.0.5845.177
实现了一个简单HTML页面，设置高度为100vh后，在iPad的Chrome浏览器中右侧出现垂直滚动条，且可滚动至完全空白区域，总高度远超200vh；但在Safari中显示正常。

原代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div style="background-color: green; height: 100%; width:100%;">This is a div</div>
</body>
</html>

CSS代码

body {
  height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: 100vh;
  height: -webkit-fill-available;
}

问题原因 #

1. 默认样式溢出：body元素默认带有margin值，即使设置了100vh高度，margin会让整体内容超出视口范围，触发滚动条；
2. 属性冲突：同时给html和body设置height:100vh与-webkit-fill-available，在iPad的Chrome中，这两个属性的高度计算逻辑和Safari不一致，导致高度被重复计算，出现远超视口的空白区域。

解决方法 #

方法一：重置默认样式并优化高度设置

修改CSS为以下内容，消除默认边距并调整高度属性的组合，避免冲突：

/* 重置所有元素的默认边距和内边距，统一盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 仅给html设置-webkit-fill-available，适配移动端视口 */
html {
  height: -webkit-fill-available;
}

/* body用min-height适配，同时兼容vh和webkit属性 */
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

HTML中的div内联样式保持不变，即可占满整个视口高度。

方法二：使用绝对定位避开vh兼容性问题

如果vh的浏览器差异难以调试，可以改用绝对定位实现全屏布局：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  position: relative;
}

div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
}

这种方式直接基于视口尺寸布局，彻底避开vh在移动端浏览器的兼容性问题。

内容的提问来源于stack exchange，提问作者Kerwen