title: CSS - stick to bottom of iOS Safari when scrolling
body: <p>I am building an app and I would like to have a navbar stuck to the bottom of the browser. I have something like</p>
  
  <pre><code>&lt;div style="display: flex; flex-direction: column; height: 100%"
    &lt;header&gt;Header&lt;/header&gt;
    &lt;section style="height: 100%"&gt;Main Content&lt;/section&gt;
    &lt;footer&gt;Sticky footer&lt;/footer&gt;
  &lt;div&gt;  
  </code></pre>
  
  <p>This works great for desktop. Here is a simple example where red is header, yellow is footer, blue is content. </p>
  
  <p><a href="https://i.stack.imgur.com/jfoJE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jfoJE.png" alt="enter image description here"></a></p>
  
  <p>However, in iOS Safari (and some Android browsers I think too) when you scroll, there bottom 44px or so is covered by the toolbar.</p>
  
  <p><a href="https://i.stack.imgur.com/nHBgB.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/nHBgB.jpg" alt="enter image description here"></a></p>
  
  <p>I read <a href="https://www.eventbrite.com/engineering/mobile-safari-why/" rel="noreferrer">here</a> and some others about workarounds, but no real "good" solution. However, is seems Instagram's website on iOS solved this:</p>
  
  <p>Without scrolling:</p>
  
  <p><a href="https://i.stack.imgur.com/DXNfd.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/DXNfd.jpg" alt="enter image description here"></a></p>
  
  <p>When you scroll the bottom nav repositions above the toolbar nicely:</p>
  
  <p><a href="https://i.stack.imgur.com/YtFlw.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/YtFlw.jpg" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>Edit: here is the working demo that solves this problem.</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
    &lt;html style="height:100%"lang="en"&gt;
      &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;&lt;/title&gt;
  
      &lt;/head&gt;
      &lt;body style="height:100%; padding: 0; margin: 0"&gt;
        &lt;div style="display: flex; flex-direction: column; height: 100%"&gt;
          &lt;header&gt;Header&lt;/header&gt;
          &lt;div&gt;
            &lt;div&gt;Main content&lt;/div&gt;
          &lt;/div&gt;
          &lt;footer style="position: fixed; bottom: 0; width: 100%"&gt;Sticky footer&lt;/footer&gt;
        &lt;/div&gt;  
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>