问题

最近做H5项目时，给一个背景图设置了100vh， 发现还是会出现滚动条， 了解了一下原因如下图

核心问题是移动浏览器（Chrome 和 Safari）有一个“有用”的功能，地址栏有时可见，有时隐藏，从而改变视口的可见大小。这些浏览器并没有随着视口高度的变化而将高度调整100vh为屏幕的可见部分，而是将100vh地址栏设置为隐藏地址的浏览器高度。结果是，当地址栏可见时，屏幕的底部将被切断，从而违背了100vh最初的目的。

也就是说移动浏览器的100vh实际上是加上了地址栏的高度。

解决方法

网上解决方法大部分都是通过js的window.innerHeight来设置一个css变量，从而模拟vh。

在文章中搜到个更好的方法，破坏性很小

dvh : 相对视口长度

也就是说不管地址栏是否隐藏 dvh永远是真正的可视区高度

Prev

649. Dota2 参议院

Next

2766. 重新放置石块