显示地址栏时100vh的高度-Chrome移动 [英] 100vh height when address bar is shown - Chrome Mobile
问题描述
我几次遇到这个问题，想知道是否有解决此问题的方法。
我的问题发生在Chrome移动应用上。在那里，您可以向下滚动一点，地址栏消失。到目前为止，如此好，让我们举个例子：
容器 height 设置为 100vh 。
I came across this problem a few times and was wondering if there was a solution to this problem.
My problem occurs on the Chrome mobile app. There, you can scroll down a bit and the adress bar disappears. So far, so good, let's make an example:
The containers height is set to 100vh.
如您所见，底部
当我向下滚动时，它看起来像这样：
When I scroll down, it looks like this:
现在看起来不错。因此，很明显，Chrome将地址栏的高度计算为视口高度。所以我的问题是：
Now it looks good. So obviously Chrome calculates the address bars height into the viewport height. So my question is:
有没有办法，无论有没有地址栏，它看起来都一样？以便容器扩展或其他？
Is there a way, that it looks the same with or without the address bar? So that the container expands or something?
推荐答案
按照此 Chrome网站上的官方文章，设置高度以填充可见视口的正确方法是使用高度：100％，位于< html> 元素上或位于位置：固定元素。如文档所述，这确保了与移动Safari的兼容性，并且与URL栏的大小无关。
As per this official article on Chrome web, the proper way to set the height to fill the visible viewport is with height: 100%, either on the <html> element or on a position: fixed element. As the document describes, this ensures compatibility with mobile Safari and is independent of how large the URL bar is.
这篇关于显示地址栏时100vh的高度-Chrome移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
