All geek questions in one place

CSS - stick to the bottom of iOS Safari while scrolling

I am creating an application and I would like the navigator to be attached 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 the desktop. Here is a simple example where the red headline, yellow is the footer, blue is the content.

enter image description here

However, in iOS Safari (and some Android browsers, which I think also), when you scroll, the toolbar at the bottom closes 44 pixels below.

enter image description here

I read here some more about workarounds, but no real “good” solution. However, it seems like the Instagram site on iOS solved this:

Without scrolling:

enter image description here

When scrolling the lower navigation add-ons above the toolbar:

enter image description here

- , 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>
+4
2

:

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

modernizr, javascript, . IOS, IOS, , .

, 2 , margin-bottom , IOS mobile. body.ios.mobile footer{ margin-bottom: 40px; }

Btw , . , .

modernizr

0

Source: https://habr.com/ru/post/1692486/

More articles:


All Articles