由于浏览器UI，CSS 100vh在移动设备上太高了

Question

解决此问题的最佳方法是什么。显然，移动设备上的所有浏览器都在顶部有一个UI（地址栏等）。这会为视口增加额外的高度，因此我使用100vh的网站缺少一个部分。

我假设不同的浏览器具有不同大小的视口，因此，我可以简单地执行类似height: calc(100vh - 50px)或高度的任务，但它不会在所有移动浏览器上匹配对？

Answer 1

通常100vh高度会考虑到调整后的高度，这就是为什么当带有滑动地址栏的浏览器向下滑动时，移动网页通常会变得很有趣;但是，显然有很多移动浏览器你不能依赖它。

地址栏的高度在浏览器中不会保持不变，因此我不建议添加-50px。

尝试使用window.innerheight属性设置高度（在javascript内）。

window.onresize = function(){
    document.body.height = window.innerHeight;
}
window.onresize(); // called to initially set the height.

请原谅任何错误，我暂时还没与JS合作过。

Answer 2

接受的答案对我不起作用。我必须进行两项调整：

• 使用document.body.style.height代替document.body.height

• 在窗口末尾添加“ px”。innerHeight

  document.body.style.height = ${window.innerHeight}px;

Answer 3

如果元素是body的 direct 子元素，则可以使用以下方法实现所需的效果：

html, body {
    height: 100%;
}

#screenheight {
    height: 100%;
    background-color: blue;
}

<div id="screenheight"></div>
<p>Random content after screenheight element.</p>

Answer 4

使用height: 100%可以降低菜单栏的高度。

您可以通过在移动浏览器上使用100vh来测试100%和document.getElementsByTagName('html')[0].scrollHeight之间的差异。

对我来说（在Andriod上使用Chrome浏览器），100vh返回的值比100%高，即使我没有在html正文中添加任何内容，它也始终为我提供垂直滚动条。