【问题标题】：Fixed element using flexbox gets repositioned on iPhone mobile Safari due to disappearing menu on scroll由于滚动菜单消失，使用 flexbox 的固定元素在 iPhone 移动 Safari 上重新定位
【发布时间】：2019-03-11 10:45:40
【问题描述】：

这是一个非常小众的问题，但我正在构建一个 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;
}

【问题讨论】：

在我的 iphone 6s 上看起来不错。 iOS 版本 11.4.1

标签： javascript html css iphone reactjs

【解决方案1】：

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

Mobile Safari 的视口是 always calculated as if the menu bars are not showing，所以这似乎是您正在寻找的测量值。

【讨论】：

像魅力一样工作。谢谢！