在做一个响应式布局时用 vh 单位定义了元素的高度，结果在发现在移动端的 Chrome 和 Firefox 浏览器中，浏览器 URL 栏显示的情况下元素都出现了错位。

查找到原因是移动端下浏览器对 100vh 的定义不考虑 URL 栏的高度（无论 URL 栏显示还是隐藏），可以用下面这张图直观地体现问题：

左侧是我们期望的 100vh “全屏”的高度，但右侧是 URL 栏显示的状态下“全屏”的高度，100vh 在这时已经超出了“全屏”高度。

对此，Google 官方有说明，bugzilla 有相关报告，但是对于我们解决问题没有任何帮助。

目前找到最好的解决方案是项目：

[repo owner=”Hiswe” name=”vh-check”]

JS 执行过一次初始化 vhCheck() 后，就可以直接用 CSS 变量 –vh-offset 修正 100vh 了。

用法：

npm install vh-check

import vhCheck from 'vh-check'
vhCheck()

main {
  height: 100vh;
  /* 兼容不支持 var 变量的浏览器 (<= IE11) */
  height: calc(100vh - var(--vh-offset, 0px));
  /* 修正后的 100vh */
}

# 商业转载请联系作者获得授权，非商业转载请注明出处。
# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
# 协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
# 作者(Author)：Mashiro
# 链接(URL)：https://2heng.xin/2019/09/18/fix-100-vh-in-mobile-browser/
# 来源(Source)：樱花庄的白猫