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

【问题标题】：CSS 100vh is too tall on mobile due to browser UI由于浏览器 UI，CSS 100vh 在移动设备上太高了
【发布时间】：2017-04-23 19:08:58
【问题描述】：

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

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

【问题讨论】：

哇，我不知道vh 在移动设备上会出现这个问题。 nicolas-hoizey.com/2015/02/…

标签： css

【解决方案1】：

通常，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();

【讨论】：

一点建议。我会将body 声明为const。所以就我而言，我是这样做的：function resetHeight() { const body = document.getElementById('main-wrap') body.style.height = window.innerHeight + 'px'}, 然后我在mounted 生命周期钩子上调用了这个函数。我认为这有点像香草js中的window.onload。
这很好用——但它只在我调整浏览器大小或打开我的开发工具时注册。我正在使用 Chrome....

【解决方案2】：

接受的答案对我不起作用。我不得不做出两个调整：

使用 document.body.style.height 代替 document.body.height
在 window.innerHeight 的末尾添加 'px'

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

【讨论】：

可能是因为你已经有一个 CSS 高度，它会覆盖 HTML 高度。您所做的是覆盖该 CSS

【解决方案3】：

使用height: 100%，它会在减少菜单栏高度后为您提供高度。

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

对我来说（Android 上的 Chrome），100vh 返回的值比 100% 更高，这总是给我一个垂直滚动条，即使我没有在 html 正文中添加任何内容。

【讨论】：

?请在投票后发表评论。
从 html 到 body &c 的整个链。必须具有高度：100%，而使用 100vh 您可以制作任何大小的子元素。投票给你的人显然在没有将整个链条设置为 height: 100% 的情况下尝试了它，但它没有用。

【解决方案4】：

如果元素是body 的直接子元素，您可以通过以下方式达到预期的效果：

html, body {
    height: 100%;
}

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

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

【讨论】：

【解决方案5】：

值得一提的简单解决方案...

继续将你的元素高度设置为100vh，然后在js中声明该元素的max-height即可。

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

现在在页面加载时，您的元素不会大于声明的最大高度，因此可以在移动设备上正常显示。显然不考虑调整大小，但负载开销较小。

【讨论】：