CSS

Question

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

<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 和其他一些关于解决方法的文章，但没有真正的 "good" 解决方案。但是，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>

Answer 1

你试过了吗：

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

Answer 2

您可以添加 modernizr，这是一个 javascript 代码，当您在浏览器中打开您的网站时，它会检测所有类似的东西。如果你在 IOS 设备上使用浏览器，它会给出 class IOS 我想，它也会为移动设备提供 class。

现在，如果您将 2 个 classes 组合在一起，如果您的 body 具有 classes IOS 和 mobile。例如body.ios.mobile footer{ margin-bottom: 40px; }

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

Link 到 modernizr

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

CSS - stick to bottom of iOS Safari when scrolling

mobile-safari

ios