title: How can I make mobile bar not block the bottom of my page?
body: <p>I have tried everything. The body should not scroll as I run into issues with overscrolling on Safari iOS and Safari webapps (save to homescreen), so instead the main div &quot;<code>#content</code>&quot;, has all the content with overflow scrolling.</p>
  <p><strong>The problem</strong> is, when <code>#content</code> is set to <code>100vh</code>, the mobile bar, covers the bottom of the content. This is a common occurrence according to Google, and I've seen many solutions but the main one that worked is setting <code>height: -webkit-fill-available;</code>, but unfortunately this stops <code>#content</code> from scrolling on Chrome Windows.</p>
  <p><strong>main.css</strong> (with scrolling not working on Chrome Windows)</p>
  <pre class="lang-css prettyprint-override"><code>body, html {
      padding: 0;
      margin: 0;
      color: white;
      background-color: black;
      overflow: hidden;
  }
  
  body {
      position: fixed;   
  }
  
  #content {
      /* height: 100vh;    Scrollbar present (good) on Safari iOS, Chrome iOS, Chrome Windows, but 
                           bottom of page blocked by browser menu bar on Safari iOS and Chrome iOS (bad) */
      height: -webkit-fill-available;  /* Scrollbar present on Safari iOS, Chrome iOS (good), scrollbar 
                                          present but no actual bar to scroll down present
                                          on Chrome Windows, can't scroll down (very bad), bottom of page 
                                          not blocked by browser menu bar on Safari iOS, Chrome iOS (good) */
      width: 100vw;
      overflow-y: scroll;
  }
  </code></pre>
  <p><strong>index.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en-gb&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot; /&gt;
          &lt;title&gt;React App&lt;/title&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;./main.css&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
          &lt;div id=&quot;root&quot;&gt;
              &lt;div id=&quot;content&quot;&gt;
                  &lt;b&gt;START&lt;br/&gt;3&lt;br/&gt;2&lt;br/&gt;1&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;test&lt;br/&gt;1&lt;br/&gt;2&lt;br/&gt;3&lt;br/&gt;END&lt;br/&gt;&lt;/b&gt;  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
              // Stops overscrolling on &quot;saved to home page&quot; webapps
              window.addEventListener(&quot;scroll&quot;, (e) =&gt; {
                  e.preventDefault();
                  window.scrollTo(0, 0);
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Probably goes without saying but, this isn't the actual page, it's how it would be constructed with React.</p>
  <p>Sorry if I haven't provided enough detail, please say if you need any information—I'll provide it; I'm at my wits' end, I am 15 years old and I've been trying to make this page how I want it for days now.</p>
  <p><strong>Images and videos to show</strong></p>
  <ol>
  <li><p><a href="https://i.stack.imgur.com/5uNN7.gif" rel="nofollow noreferrer">Chrome Windows, <code>height: 100vh;</code></a> (wanted behaviour, can scroll)</p>
  </li>
  <li><p><a href="https://i.stack.imgur.com/LuT7b.png" rel="nofollow noreferrer">Chrome Windows, <code>height: -webkit-fill-available;</code></a> (unwanted behaviour, can't scroll)</p>
  </li>
  <li><p><a href="https://i.imgur.com/3RmasIA.mp4" rel="nofollow noreferrer">Safari iOS, <code>height: 100vh;</code></a> (unwanted behaviour, bottom of page blocked by Safari menu bar)</p>
  </li>
  <li><p><a href="https://i.imgur.com/iZQAmJs.mp4" rel="nofollow noreferrer">Safari iOS, <code>height: -webkit-fill-available;</code></a> (wanted behaviour, bottom of page not blocked by Safari menu bar)</p>
  </li>
  </ol>
  <p>1 and 4 are what I want to achieve.</p>
  <p>Thank you so so so much if you can help me :)</p>