CSS-滚动时固定在iOS Safari的底部

Question

CSS-滚动时固定在iOS Safari的底部

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

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

Run Code Online (Sandbox Code Playgroud)

这非常适合台式机。这是一个简单的示例，其中红色是页眉，黄色是页脚，蓝色是内容。

但是，在iOS Safari（我也认为某些Android浏览器）中，滚动时，工具栏会覆盖底部44px左右。

我在这里阅读了一些其他的解决方法，但没有真正的“好的”解决方案。但是，似乎iOS上的Instagram网站解决了此问题：

不滚动：

当您很好地滚动工具栏上方的底部导航位置时：

一种解决方案是使工具栏始终可见，但我想采用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Emi*_*ily 5

你有没有尝试过：

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

Run Code Online (Sandbox Code Playgroud)

谢谢你的想法。实际上这不是一个重叠的问题 - 底部导航栏（iOS 导航栏）不是 DOM 的一部分，而是实际的应用程序外壳，因此它始终位于顶部。 (2认同)
实际上，这仅在美学上起作用。如果底部导航栏尚未显示，则需要按两次以激活单击事件。 (2认同)

归档时间：	8 年，1 月前
查看次数：	6601 次
最近记录：	8 年，1 月前