You*_*oui 6 css mobile-safari flexbox
我有一个典型的 Flexbox 粘性页脚解决方案，如下所示：
<body>
<div class="wrapper">
<div class="header">Page Header</div>
<div class="body">
<div class="body1">Page Body 1</div>
<div class="body2">Page Body 2</div>
<div class="body3">Page Body 3</div>
<div class="body4">Page Body 4</div>
<div class="body5">Page Body 5</div>
</div>
<div class="footer">Page Sticky Footer</div>
</div>
</body>
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
}
.body {
flex-grow: 1;
}
在 iOS Safari 上，我希望在滚动时看到地址栏最小化，但地址栏却保持原状。我知道如果我允许在根html元素上滚动，我就可以让事情正常工作，但我想知道是否可以采取任何措施来保留 iOS 地址栏最小化行为，同时保持主体内包装容器中的滚动。
沙箱在这里： https ://codesandbox.io/s/condescending-pascal-r4ntne?file=/styles.css
您可以访问： https: //r4ntne.csb.app/
在 iOS 设备上亲自体验一下。
我让它在 iOS 16 中工作。你必须将scroll-padding-top全部设置到body上。所以在你的例子中，它应该是这样的：
body {
scroll-padding-top: constant(safe-area-inset-top); /* for iOS devices */
scroll-padding-top: env(safe-area-inset-top); /* for modern browsers */
}
.wrapper {
scroll-padding-top: constant(safe-area-inset-top);
scroll-padding-top: env(safe-area-inset-top);
}
.body {
height: calc(100% - env(safe-area-inset-top)); /* for modern browsers */
height: calc(100% - constant(safe-area-inset-top)); /* for iOS devices */
overflow-y: scroll;
}
| 归档时间： |
|
| 查看次数： |
950 次 |
| 最近记录： |