地址栏/URL栏在移动Safari上滚动时保持不变
<p>我正在使用React（16.8.6）构建一个网站，但在移动Safari上，当用户开始滚动时，它不会像其他网站那样折叠/缩小URL栏。</p>
<p>包装div的CSS如下所示：</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;"><ContentContainer>
<ScrollContainer>
{...otherComponentsHere}
<ScrollContainer/>
<ContentContainer/></pre>
<pre class="brush:css;toolbar:false;">const ContentContainer = styled.div`
height: 100%; /*允许两个列占据浏览器窗口的整个高度*/
overflow-y: auto;
flex-grow: 1;
display: flex;
flex-direction: column;
`;
const ScrollContainer = styled.div`
flex: 1;
`;</pre>
<p><br /></p>
<p>App.css如下所示：</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">html {
height: 100%;
min-height: 100vh;
}
body {
font-family: 'Work Sans', 'Courier New', sans-serif;
min-height: 100%;
height: 100%;
margin: 0px;
}
#app {
height: 100%;
}
#root {
height: 100%;
display: flex;
overflow: hidden; /*使body不可滚动*/
box-sizing: border-box;
}</pre>
<p><br /></p>
<p>我正在尝试找出这个CSS中的问题，它阻止了Safari URL栏在用户滚动时折叠。非常感谢您的帮助。</p>
1
810
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
要在移动Safari中折叠/收缩URL栏，您必须使您的
body溢出视口，但这里并非如此：您的body不可滚动，而且您的ContentContainer完全位于视口中。要测试这个，请创建一个没有CSS的新页面，并将足够的内容放入
body中以使页面可滚动。