通常100vh的高度会考虑到调整后的高度，这就是为什么当浏览器的地址栏向下滑动时，你有时会看到移动的页面变得很时髦。
对于不考虑vh单位内滑动条的浏览器：地址栏的高度在不同的浏览器中并不是固定不变的，所以我建议不要附加-50px。
尝试使用window.innerheight属性设置页面高度（使用javascript）。

function resetHeight(){
    // reset the body height to that of the inner browser
    document.body.style.height = window.innerHeight + "px";
}
// reset the height whenever the window's resized
window.addEventListener("resize", resetHeight);
// called to initially set the height.
resetHeight();

公认的答案对我不起作用，我不得不做两个调整：

• 使用文档.正文.样式.高度代替文档.正文.高度
• 添加'px'到窗口的末尾.innerHeight

单据体样式高度= ${window.innerHeight}px;

使用height: 100%，它给出了降低菜单栏高度后的高度。
您可以通过在移动的浏览器上使用document.getElementsByTagName('html')[0].scrollHeight来测试100vh和100%之间的差异。
对我来说（Chrome on Andriod），100vh返回的值比100%高，100%总是给我一个垂直滚动条，即使我没有在html正文中添加任何内容。

如果元素是body的 * direct * 子元素，则可以使用以下命令获得所需效果：

html, body {
    height: 100%;
}

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

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

在现代的浏览器中，你可以使用dvh单位，它指的是动态视口。关于这些新单位的更多信息，请参见相关的can I use和web.dev article。

值得一提的简单解决方案...
继续将元素的高度设置为100 vh，然后在js中声明该元素的max-height。

$('.top-hero-container').css('max-height', (window.innerHeight + "px"));

现在在页面加载时，你的元素不会大于声明的max-height，所以在移动的上显示的很好。这显然没有考虑到大小调整，但是加载开销更小。