移动端设置height:100vh出现滚动条的解决办法

最新推荐文章于 2025-09-17 22:35:48 发布

原创最新推荐文章于 2025-09-17 22:35:48 发布 · 1.2k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #css

css 专栏收录该内容

5 篇文章

订阅专栏

该文章已生成可运行项目，

在许多移动设备上，1vh 的计算基于视口的高度，但某些浏览器（如移动端的 Chrome 和 Safari）会在显示或隐藏地址栏时改变视口高度。这会导致 100vh 的高度并不完全等于设备屏幕的可用高度。

问题表现:
- 地址栏显示时，100vh 会包含地址栏的高度，导致页面布局下方出现空白。
- 地址栏隐藏后，100vh 仍然固定，无法动态调整到新的视口高度。
解决方式:
- 通过 js 动态计算 window.innerHeight（浏览器窗口的实际高度，这样不会受地址栏影响）。
- 使用 js 计算出 1vh 的实际 px 值在 css 中使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 100vh </title>
  <style>
  	* {
        margin: 0;
        padding: 0;
    }
    :root {
      /* 初始值 */
      --vh: 1px;
    }
    .container {
      height: calc(var(--vh, 1vh) * 100);
      background-color: gray;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>nihao!</h1>
  </div>

  <script>
    function getVhToPx() {
      const oneVhValue = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${oneVhValue}px`);
    }
    
    //使用 debounce 优化 resize 事件监听器，避免窗口快速调整大小时频繁触发函数。
    function debounce(func, wait = 100) {
      let timeout;
      return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => func(...args), wait);
      };
    }

    // 初始化一次
    getVhToPx();

    // 监听窗口变化后再次执行
    window.addEventListener('resize', debounce(getVhToPx));
    // 监听屏幕旋转
    window.addEventListener("orientationchange", getVhToPx);
    // 监听DOMContentLoaded事件
    document.addEventListener("DOMContentLoaded", getVhToPx);
  </script>
</body>
</html>