这是一个非常利基的问题,但我正在建立一个反应应用程序,并有一个主要的背景元素是一个登录页 <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>

.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;
}