由于滚动菜单消失，使用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的视口总是像菜单栏未显示一样进行计算 ，因此这似乎是您要查找的度量。