在移动浏览器上将 div 高度设置为 100% 时浏览器滚动跳转

Question

Dropbox 最近更新了他们的网站布局，其中第一个 div 占据了 100% 的窗口大小，并且无论浏览器高度如何，都将内容垂直居中。

我正在为我自己的网站尝试这种布局。但是，我注意到当我在滚动时在手机上打开 chrome 网站时，会出现初始跳转，然后页面看起来很好。

如何摆脱这种滚动跳跃？

您可以通过移动设备（Android 或 iOS）访问 Dropbox 网站进行检查

[更新] 当您滚动并且地址栏隐藏时会发生这种情况。

Answer 1

这是我尝试过的最好的解决方案（最简单的）。

例如，您可以使用 CSS 将高度设置为 90vh，然后在加载文档时使用 javascript 将高度设置为窗口高度的 0.9 *。

以 jQuery 为例：

$("#element").css("height", 0.9*$(window).height());

)

不幸的是，没有任何东西可以使用纯 CSS :P

见：This S.O. Question