100vh问题及解决方案

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

具体问题

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

解决方法

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

   html, body {
       height: 100%;
   }
   
   .element {
       height: 100%;
   }
   

2. 使用 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);
   }
   

3. 使用环境变量 env(safe-area-inset-bottom)
   适用于 iOS Safari，可以考虑使用 env(safe-area-inset-bottom) 来设置安全区域。

   .element {
       height: calc(100vh - env(safe-area-inset-bottom));
   }
   

4. 使用dvh单位(较新浏览器兼容)

   .element {
       height: 100dvh;
   }
   

通过这些方法，你可以更好地处理 100vh 在移动端的问题，确保布局在不同设备和浏览器中保持一致。