CSS全屏高度浏览器兼容问题：iPad Safari显示异常求助

针对你在iPad Safari中遇到的视图无法正确填满视口的问题，以下是两种可行的修复方案：

方案一：兼容旧版Safari的前缀写法 #

调整CSS属性顺序并重置默认样式，确保-webkit-fill-available在Safari中正确生效：

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

body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow: hidden; /* 无需滚动时添加，避免滚动条干扰高度计算 */
}

说明： #

• 用min-height替代height，确保视图至少占满视口，同时兼容Safari的动态工具栏高度计算
• 重置margin和padding消除默认样式对高度的影响
• -webkit-fill-available会让Safari计算当前实际可用的视口高度（排除动态工具栏）

方案二：使用现代动态视口单位（推荐） #

利用CSS新单位dvh（Dynamic Viewport Height），它会自动适配浏览器动态工具栏的变化，无需前缀：

html, body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow: hidden;
}

说明： #

• dvh是专门为解决动态视口场景设计的单位，会实时匹配当前可见的视口高度
• 现代浏览器（包括最新版Safari）均支持该单位，写法简洁可靠

原方案问题分析 #

你之前的代码存在两个核心问题：

1. 100vh在iPad Safari中会包含浏览器工具栏的占位高度，导致内容被遮挡
2. 属性顺序和类型（height而非min-height）导致-webkit-fill-available未正确覆盖100vh的行为

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