Safari浏览器页面内容不足100vh时被裁切问题求助

问题成因 #

• Safari（尤其是iOS端）的视口高度计算存在初始加载bug：当页面内容高度不足100vh时，浏览器会错误处理动态工具栏（地址栏、底部导航栏）的占位空间，导致实际可视区域被裁切。
• 早期Safari对vh单位的解析逻辑和其他浏览器不同，它会把动态工具栏的高度包含进vh计算，导致初始渲染时页面可用空间被压缩，内容显示不全。

更优解决方案 #

1. 使用动态视口单位dvh（推荐） #

dvh是CSS新增的动态视口高度单位，会实时根据当前浏览器的可视区域（自动排除动态工具栏/地址栏）计算高度，完全适配Safari的视口变化：

body {
  min-height: 100dvh;
}

注：Safari 15.4+已支持该单位，覆盖绝大多数现代iOS设备。

2. 传统高度继承方案 #

通过确保html和body的高度正确继承，避免初始视口计算偏差：

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0; /* 清除默认边距，避免额外滚动 */
}

3. WebKit私有属性适配旧版Safari #

针对iOS 15.4以下的旧版Safari，可使用WebKit私有属性-webkit-fill-available：

body {
  min-height: -webkit-fill-available;
  min-height: 100dvh; /* 现代浏览器降级 */
}

同行实践情况 #

很多前端开发者都遇到过这个问题，你用的min-height:110vh是一个临时的hack方案，虽然能解决问题，但会导致页面出现不必要的垂直滚动条，影响用户体验。目前行业内更主流的做法是采用dvh或-webkit-fill-available的方案，既精准又不会引入额外滚动问题。

内容的提问来源于stack exchange，提问作者Saeed Ghezel Arsalan