CSS——在滚动的时候，要始终保持在iOS Safari的底部

I am building an app and I would like to have a navbar stuck to the bottom of the browser. I have something like

我正在开发一个应用程序，我想在浏览器底部安装一个导航条。我有类似的

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

This works great for desktop. Here is a simple example where red is header, yellow is footer, blue is content.

这对桌面很有用。这里有一个简单的例子，红色是标题，黄色是页脚，蓝色是内容。

However, in iOS Safari (and some Android browsers I think too) when you scroll, there bottom 44px or so is covered by the toolbar.

然而，在iOS Safari(我想也有一些Android浏览器)中，当你滚动时，工具栏会覆盖到底部44px左右。

I read here and some others about workarounds, but no real "good" solution. However, is seems Instagram's website on iOS solved this:

我在这里读到一些关于变通方法的书，但没有真正的“好的”解决方案。然而，似乎Instagram的iOS网站解决了这个问题:

Without scrolling:

没有滚动:

When you scroll the bottom nav repositions above the toolbar nicely:

当你在工具栏上方滚动底部导航重置时:

One solution is just make the toolbar always visible, but I would like to take the Instagram style approach. I am not sure how to implement in CSS (or CSS + JS). Does anyone know how I can achieve the Instagram effect? The bottom navbar wrt to the Safari iOS toolbar moves seemlessly when you scroll.

一种解决方案是让工具栏始终可见，但我想采用Instagram的方式。我不知道如何在CSS(或CSS + JS)中实现。有谁知道我怎么才能达到Instagram的效果吗?当你滚动的时候，Safari iOS工具栏底部的navbar wrt会不太正常地移动。

Edit: here is the working demo that solves this problem.

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

  <!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>

2 个解决方案

#1

Have you tried:

你有试过:

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

#2

You could add modernizr, which is a javascript code that detects all kinda stuff when opening your site on browser. If you a browser on an IOS device it will give the class IOS I think, it also gives a class for mobile.

您可以添加modernizr，它是一个javascript代码，可以在浏览器上打开站点时检测到所有的东西。如果你在IOS设备上有一个浏览器它会给IOS类，它也会给移动类。

Now if you combine the 2 classes you can add a margin-bottom with the amount of pixels of that toolbar if your body has the classes IOS and mobile. For example body.ios.mobile footer{ margin-bottom: 40px; }

如果你将这两个类合并在一起，你可以在你的身体中添加IOS和mobile类的时候，在你的身体中添加一个带有工具栏像素的下界。例如body.ios。移动页脚{ margin-bottom:40像素;}

Btw I dont know the exact names of the classes it gives. I just know that it does that.

顺便说一句，我不知道它提供的课程的确切名称。我只知道它有这个功能。

Link to modernizr

modernizr链接

#1