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

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

下面的方法对我很有效:

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%将使容器采用可见视口高度。

您可以通过添加以下脚本和样式来做到这一点

function appHeight() {
  const doc = document.documentElement
  doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
}

window.addEventListener('resize', appHeight);
appHeight();

风格

.module {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

body {
   width: 100%;
   height: 100%
}

100%会根据屏幕大小自行调整但出于某种原因 100vh在屏幕变化时调整有问题，所以如果你使用100vh或100%，使用底部0将受到影响

例如，当搜索栏在视图中或不在移动中，100%与变化，其中100vh将粘在屏幕高度的第一个值

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

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

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

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

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/