javascript - 由于滚动菜单消失，使用 flexbox 的固定元素在 iPhone 移动 Safari 上重新定位

Question

这是一个非常小众的问题，但我正在构建一个 React 应用程序并有一个登录页面，其中主要背景元素是 <div>与 position: fixed和 height: 100%造型。它在所有桌面浏览器上运行良好，但当我在我的 iPhone 上尝试时，内容在滚动时突然向下移动——我很确定这是由于 Safari 的底部菜单栏消失了。渲染高度为 100% 时，有什么方法可以“绕过”此 Safari 菜单栏吗？这是我的元素的样式。要查看实际效果，请访问以下链接:https://gwtcharlotte.herokuapp.com/

JS/HTML

<div className="landing-container text-center">
    <div style={this.styleOptions()}
        className='landing-image'>
    </div>
    <div className={`landing-overlay ${this.state.imageLoaded}`}>
        <div>
            <h1>GUYS WITH TIES</h1>
            <p className='m-w-container m-auto'>Bringing Charlotte together and improving our community through non-profit fundraising</p>
            <a style={{opacity: (this.state.imageLoaded ? 1 : 0)}} 
            className={'btn btn-red btn-small landing-btn'} 
            onClick={() => this.smoothScroll()}>DISCOVER OUR EVENTS</a>
            <div style={{width:'100%', height: 70}}/>
        </div>
    </div>
</div>

CSS

.landing-container{
  display: block;
  width: 100%;
  position: fixed;
  height: 100%;
  min-height: 500px;
  font-size: 24px;
  z-index: 0;
}
.landing-overlay{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color: #fff;
  background: linear-gradient(#29709c,#4e6c7b);
  display: flex;
  padding: 15px;
  flex-direction: column;
  justify-content: center;
}

Answer 1

要在移动版 Safari 中将元素调整为 100% 高度而不考虑菜单栏，请使用 CSS vh 单元。在您的情况下，您需要在 .landing-container 上使用 height: 100vh。

Mobile Safari 的视口(viewport)是 always calculated as if the menu bars are not showing , 所以看起来这就是您正在寻找的测量值。