求助：Instagram浏览器中100vh适配及-webkit-fill-available高度不足问题

问题背景 #

开发全屏section滚动切换网站，每个section初始用height:100vh定义高度，在带有可收起底部导航栏的移动端浏览器（如Instagram内置浏览器）中，导航栏收起/展开会导致section尺寸变化。改用-webkit-fill-available等属性后，导航栏影响问题解决，但section高度不足，滚动到底部直接露出下一个section；尝试dvh单位时，页面内容随滚动出现布局错乱。

代码示例 #

HTML #

<!DOCTYPE html>
<html lang="fr" >
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="screen">
    <div class="content">
      lekjfosrejfiosfjh
    </div>
  </div>
    <div class="screen2">
    <div class="content">
      lekjfosrejfiosfjh
    </div>
  </div>
    <div class="screen">
    <div class="content">
      lekjfosrejfiosfjh
    </div>
  </div>
</body>
</html>

CSS #

html, body{
  margin: 0;
  padding: 0;
}

.screen {
  background-color: mediumpurple;
  min-height: 100vh;
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
}
.screen2 {
  background-color: red;
  min-height: 100vh;
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
}
.content {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 30px;
}

解决方案 #

方案1：JavaScript动态适配视口高度 #

纯CSS方案在部分移动端浏览器存在兼容性短板，用JS实时计算视口高度是最可靠的方式：

// 计算并设置自定义视口高度变量
function setViewportHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初始化执行
setViewportHeight();
// 监听窗口尺寸变化和屏幕旋转
window.addEventListener('resize', setViewportHeight);
window.addEventListener('orientationchange', setViewportHeight);

修改CSS中section的高度定义：

.screen, .screen2 {
  height: calc(var(--vh, 1vh) * 100);
}

该方案能实时适配导航栏收起/展开后的视口高度，避免尺寸跳动和高度不足问题。

方案2：优化CSS Fallback写法 #

若倾向纯CSS解决，调整fill-available的使用逻辑，同时确保html/body的高度设置正确：

html {
  height: 100%;
}
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  margin: 0;
  padding: 0;
}

.screen, .screen2 {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  height: 100%;
}

通过让body继承html的高度，再让section继承body的高度，减少fill-available导致的高度计算偏差。

方案3：修复dvh单位的布局错乱 #

若坚持使用dvh，排查并修复布局冲突：

• 确保body未设置overflow: hidden或不必要的定位属性
• 给section添加overflow: auto，避免内容溢出引发布局偏移：

.screen, .screen2 {
  height: 100dvh;
  overflow: auto;
}

同时保持.content的flex布局，避免内部元素使用依赖父元素高度的绝对定位。

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