我提出了一个React组件——如果你使用React，请查看它，如果你不使用React，请浏览源代码，这样你就可以使它适应你的环境。

它将全屏div的高度设置为window。innerHeight，然后在窗口调整大小时更新它。

不幸的是，这个问题至今仍然存在。最大的误导是不可能用浏览器的设备工具栏来表示情况。

我刚刚解决了这个问题(在PC、iOS和android浏览器上进行了测试):

.your_class {
   height: 100vh,
   max-height: 100%, // <-- add the line
   ...some other props,
}

我希望它能节省你的时间。

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

CSS:

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

HTML:

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

我在下面创建了两个例子:

要展示如何高度:100vh的高度可以导致滚动在移动chrome浏览器:

代码:https://codesandbox.io/embed/mobile-viewport-100vh-issue-nxx8z?fontsize=14&hidenavigation=1&theme=dark

演示:https://nxx8z.csb.app/

解决方案使用位置:固定解决问题和纯CSS:

代码:https://codesandbox.io/s/mobile-viewport-100vh-issue-fix-forked-ypx5x?file=/index.html

演示:https://ypx5x.csb.app/

我刚刚发现我设计的一个web应用程序在iphone和ipad上有这个问题，并发现一篇文章建议使用针对特定苹果设备的媒体查询来解决这个问题。

我不知道是否可以在这里分享那篇文章中的代码，但是地址是:http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

引用这篇文章:“使用针对旧版本iPhone和iPad分辨率的媒体查询，将元素高度与设备高度匹配。”

他们只添加了6个媒体查询来适应全高度元素，它应该可以工作，因为它是完全由CSS实现的。

编辑等待:我现在无法测试它，但我会回来报告我的结果。

React用useEffect和useState挂钩解决方案

    function App() {
      const [vh, setVh] = useState(window.innerHeight);
    
      useEffect(() => {
        const updateVh = () => {
          setVh(window.innerHeight);
        };
    
        window.addEventListener('resize', updateVh);
    
        return () => window.removeEventListener('resize', updateVh);
      }, []);
    
      return (
        <div style={{ height: vh }}>
          {vh} px
        </div>
      );
}

演示:https://jsfiddle.net/poooow/k570nfd9/