gpt4 book ai didi

ios - CSS - 滚动时坚持到 iOS Safari 的底部

转载 作者:可可西里 更新时间:2023-11-01 04:40:48 24 4
gpt4 key购买 nike

我正在构建一个应用程序,我希望将导航栏固定在浏览器的底部。我有类似的东西

<div style="display: flex; flex-direction: column; height: 100%"
<header>Header</header>
<section style="height: 100%">Main Content</section>
<footer>Sticky footer</footer>
<div>

这适用于桌面。这是一个简单的例子,红色是页眉,黄色是页脚,蓝色是内容。

enter image description here

但是,在 iOS Safari(我认为还有一些 Android 浏览器)中滚动时,底部 44px 左右被工具栏覆盖。

enter image description here

我读了here和其他一些关于解决方法的问题,但没有真正的“好”解决方案。然而,iOS 上的 Instagram 网站似乎解决了这个问题:

不滚动:

enter image description here

当您滚动底部导航时,工具栏上方的导航位置会很好地重新定位:

enter image description here

一个解决方案就是使工具栏始终可见,但我想采用 Instagram 风格的方法。我不确定如何在 CSS(或 CSS + JS)中实现。有谁知道如何实现 Instagram 效果?当您滚动时,Safari iOS 工具栏的底部导航栏会无缝移动。

编辑:这是解决这个问题的工作演示。

  <!DOCTYPE html>
<html style="height:100%"lang="en">
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body style="height:100%; padding: 0; margin: 0">
<div style="display: flex; flex-direction: column; height: 100%">
<header>Header</header>
<div>
<div>Main content</div>
</div>
<footer style="position: fixed; bottom: 0; width: 100%">Sticky footer</footer>
</div>
</body>
</html>

最佳答案

你试过吗:

footer {
position: fixed;
bottom: 0;
z-index: 10; /** this value affects the overlapping **/
}

关于ios - CSS - 滚动时坚持到 iOS Safari 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48365563/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com