我通过将最外层的div放在position: absolute，然后设置高度为100%来解决这个问题:

CSS:

.outer {
    position: absolute;
    height: 100%;
}

HTML:

<div class="outer">
    <!-- content -->
</div>

VH 100在移动设备上表现不佳，因为它没有考虑iOS栏(或其他平台上的类似功能)。

一个很好的解决方案是使用JavaScript的"window.innerHeight"。

简单地将元素的高度赋给这个值。 $ (' .element-name ') .height (window.innerHeight);

注意:在JS中创建一个函数可能很有用，这样当屏幕调整大小时，高度就可以改变。但是，我建议只在屏幕宽度改变时调用该函数，这样当用户向下滚动页面时iOS栏消失时，元素的高度就不会跳跃。

下面的方法对我很有效:

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

body将采用可见视口高度，而#your-app-container with height: 100%将使容器采用可见视口高度。

看起来CSS修复是不可靠的，JS一个工作得很好，但元素在用户打开页面时跳跃。

我解决了这个问题使用JS从其他答案+淡出动画隐藏跳跃。

这并不适合所有的用例，但对于其中一些用例，比如必须在底部的按钮，可能是一个很好的解决方案。

关于这个问题及其可能的解决方案可以在这篇博客文章中找到:在100vh布局中寻址iOS地址栏

我最终在我的React应用程序中的解决方案是利用上面帖子中描述的React -div-100vh库。

不幸的是，这是故意的……

这是一个众所周知的问题(至少在safari mobile中)，这是故意的，因为它可以防止其他问题。Benjamin Poulain回复了一个webkit漏洞:

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :) The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS). It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting. Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size. From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

Nicolas Hoizey对此做了很多研究:https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

没有修复计划

在这一点上，除了避免在移动设备上使用视口高度之外，你没有什么可以做的。Chrome在2016年也变成了这样:

https://groups.google.com/a/chromium.org/forum/ !主题/ blink-dev / BK0oHURgmJ4 https://developers.google.com/web/updates/2016/12/url-bar-resizing