如何在Safari浏览器中固定容器为视口高度避免滚动调整

问题根源 #

Safari的dvh单位会随浏览器顶部导航栏的显示/隐藏实时改变值，导致你设置的navbar + container-banner = 100dvh总高度动态变化，触发内容重排。要实现加载时适配视口且滚动时高度固定，核心是锁定容器的初始视口高度，避免动态调整。

具体修改方案 #

方案1：纯CSS适配（推荐）

直接替换dvh为vh，并配合Safari专属属性锁定高度：

/* 外层容器（比如body）先锁定初始视口高度 */
body {
  height: 100vh;
  /* Safari专属：用fill-available锁定初始可用高度，不随导航栏变化 */
  min-height: -webkit-fill-available;
  min-height: fill-available;
  overflow-x: hidden;
}

/* 保持你原有的navbar高度设置 */
.navbar {
  height: 60px; /* 替换成你实际的navbar高度 */
}

/* 修改container-banner的高度计算方式 */
.container-banner {
  /* 用100vh减去navbar高度，得到初始视口下的banner高度 */
  height: calc(100vh - 60px);
  /* 锁定高度，禁止动态调整 */
  min-height: calc(-webkit-fill-available - 60px);
  min-height: calc(fill-available - 60px);
  /* 禁止banner内部滚动，防止触发Safari导航栏切换 */
  overflow: hidden;
}

注：-webkit-fill-available是Safari支持的属性，会取页面加载时的视口可用高度，不会因导航栏隐藏而扩大，完美锁定初始高度。

方案2：JS配合CSS（兼容特殊场景）

如果纯CSS方案有兼容问题，用JS获取初始视口高度并设置为全局变量，再在样式中使用：

// 页面加载完成后获取初始视口高度
window.addEventListener('load', () => {
  document.documentElement.style.setProperty('--initial-vh', `${window.innerHeight}px`);
});

对应的CSS修改：

.navbar {
  height: 60px;
}

.container-banner {
  /* 用初始视口高度减去navbar高度 */
  height: calc(var(--initial-vh) - 60px);
  /* 强制锁定高度，不允许变化 */
  max-height: calc(var(--initial-vh) - 60px);
  min-height: calc(var(--initial-vh) - 60px);
}

核心修改点 #

1. 抛弃动态变化的dvh单位，改用基于初始视口高度的固定值
2. 给container-banner设置min-height和max-height锁定高度，阻止Safari动态调整
3. 禁止container-banner内部滚动，避免触发Safari导航栏的显示/隐藏切换

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