100vh问题及解决方案

100vh 问题通常出现在移动端浏览器中，尤其是当你使用 100vh 设定元素高度时。这是因为移动端浏览器在显示视口高度时会包括地址栏和工具栏，这些栏在滚动时会隐藏，从而导致视口高度发生变化，影响布局。

具体问题

高度不稳定：使用 100vh 的元素在移动端可能会在用户滚动页面时突然变大或变小，影响用户体验。
滚动时视口变化：地址栏和工具栏的显示/隐藏会导致页面布局不断调整，出现闪烁或布局错误。

解决方法

使用 100% 高度
在某些情况下，可以使用 height: 100% 而不是 100vh 来确保元素高度始终是其父元素的高度。这要求父元素的高度是明确定义的。
```
html, body {height: 100%;
}.element {height: 100%;
}
```

使用 JavaScript 计算视口高度
使用 JavaScript 来动态设置高度，排除地址栏和工具栏的影响。

function setViewportHeight() {let vh = window.innerHeight * 0.01;document.documentElement.style.setProperty('--vh', `${vh}px`);
}window.addEventListener('resize', setViewportHeight);
window.addEventListener('orientationchange', setViewportHeight);
setViewportHeight();

然后在 CSS 中使用自定义属性 --vh：

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

使用环境变量 env(safe-area-inset-bottom)
适用于 iOS Safari，可以考虑使用 env(safe-area-inset-bottom) 来设置安全区域。
```
.element {height: calc(100vh - env(safe-area-inset-bottom));
}
```
使用dvh单位(较新浏览器兼容)
```
.element {height: 100dvh;
}
```