CSS - 滚动时粘在 iOS Safari 的底部答案

【问题标题】：CSS - stick to bottom of iOS Safari when scrollingCSS - 滚动时粘在 iOS Safari 的底部
【发布时间】：2018-06-30 03:19:39
【问题描述】：

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

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

这对桌面非常有用。这是一个简单的例子，红色是页眉，黄色是页脚，蓝色是内容。

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

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

不滚动：

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

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

【问题讨论】：

我不确定height: 100%;。你的意思是页面是100vh？

标签： ios css mobile-safari

【解决方案1】：

你试过了吗：

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

【讨论】：

感谢您的想法。实际上这不是重叠问题——底部导航栏（iOS 导航栏）不是 DOM 的一部分，而是实际的应用程序外壳，所以它总是在顶部。
这个答案似乎是正确的。甚至 instagram 网站也使用此代码。我尝试了相同的here 并在 iPhone 6、6s 和 6+ 上运行良好。页脚将始终贴在页面底部，当 iOS 导航栏可见时，它位于其正上方并且不会重叠。最后，我们可以在容器/页面中添加一个margin-bottom，这样底部的内容就不会被我们的页脚（不是 iOS 的页脚）覆盖。
哇，真的吗？也许我做错了什么。我今天会试一试，然后报告。感谢您的通知。
嘿，这毕竟对我有用。谢谢卢卡斯。我会在最终代码的问题中发布一个sn-p。
实际上这只在美学上有效。如果底部导航栏尚未显示，则需要按两次才能激活点击事件。

【解决方案2】：

您可以添加modernizr，这是一个 javascript 代码，当您在浏览器上打开您的网站时，它会检测所有类型的内容。如果您是 IOS 设备上的浏览器，它会提供 IOS 课程，我想它也会提供移动课程。

现在，如果您将这 2 个类结合起来，如果您的身体具有类 IOS 和 mobile，则可以添加带有该工具栏像素数量的 margin-bottom。例如body.ios.mobile footer{ margin-bottom: 40px; }

顺便说一句，我不知道它给出的类的确切名称。我只知道它会这样做。

链接到modernizr

【讨论】：

@Lucas 他的代码看起来运行良好。但如果它不起作用，你可以试试这个。