移动设备上的视口高度（100vh）导致不需要的滚动答案

【问题标题】：viewport height (100vh) on mobile leads to unwanted scroll移动设备上的视口高度（100vh）导致不需要的滚动
【发布时间】：2023-04-04 05:45:01
【问题描述】：

我正在 Angular 10 中开发移动主题。

我已经使用vh 来设置组件的高度。

我的应用程序非常复杂，我在 vh 中设置了 100 多个位置的高度。将每个高度更改为 px's 或 % 对我来说是不可能的。

我完全知道这个问题并不新鲜，并且在不同的论坛上有很多解决方案。但没有一个对我有用。

我使用了以下脚本。但我收到错误 --vh 未定义。

<script>
     window.addEventListener('resize', () => {
      // We execute the same script as before
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    });
  </script>
  <style>
    body {
      height: calc(var(--vh, 1vh) * 100);
    }
  </style>

即使我设法让它发挥作用，我也必须在很多地方进行更改，这对我来说是不可能的。

任何建议将不胜感激。

谢谢。

【问题讨论】：

标签： css angular height viewport

【解决方案1】：

几件事。

首先是设置 CSS 变量 --vh 的代码。它需要在初始加载和任何后续加载以及调整大小时运行：

function resize() {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', resize);
window.addEventListener('load', resize);

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

<body>
</body>

其次，将 vh 的用法改为 --vh。

我猜你需要设置一个编辑宏，或者只是设置一个查找和替换，然后手动转到下一个，因为你可能想检查你的替换是否正确。

例如对于 80vh，你会想要 calc(var(--vh) * 80); 实际上，我已经在一个项目中完成了它，而且还不错，但我没有你提到的数百个。幸运的是 vh 是一个不寻常的字符串，所以不难找到下一个。

【讨论】：