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和其他一些有关变通方法的内容，但没有真正的＆＃34;好的＆＃34;解。但是，似乎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>

Answer 1

你试过了吗？

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

Answer 2

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

现在，如果您合并了2个类，则可以添加margin-bottom，其中包含该工具栏的像素数量，如果您的正文包含类IOS和mobile。例如body.ios.mobile footer{ margin-bottom: 40px; }

顺便说一句我不知道它给出的类的确切名称。我只是知道它确实如此。

链接到modernizr

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

2 个答案: