title: Flexbox footer not positioning correctly on mobile
body: <p>I am using Flexbox to display a header, middle and footer in a page. The footer is always at the bottom. The middle section stretches out using <code>flex-grow:1</code> so that all three elements together fit the page nicely.</p>
  
  <p>This works perfectly on desktop browsers. On mobile browsers I can't get the layout to respond to the showing and hiding of url bar / tool bars of the mobile browser.</p>
  
  <p>Using <code>100vh</code> or <code>100%</code> as the height does not take these bars on mobile into account. </p>
  
  <p>I tried adding javascript to respond to window resize/scroll, but that seems to work only half of the time. </p>
  
  <p>Using Javascript seems rather hacky, is there a CSS only way to take a mobile url bar into account?</p>
  
  <p>How can I place a flex item at the bottom of the page on mobile, even when the url bar shows and hides?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const app = document.querySelector("app")
  window.addEventListener("resize", () =&gt; resize())
  window.addEventListener("scroll", () =&gt; resize())
  
  function resize(){
       console.log("resizing window")
       app.style.height = window.innerHeight + "px";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin:0; padding:0;
  }
  
  app, section {
    box-sizing:border-box;
  }
  
  app {
    display:flex;
    flex-direction:column;
    height:100vh;
    border:4px solid blue;
  }
  
  .header {
    background-color:#4cc;
  }
  
  .middle {
    flex-grow:1;
    background-color:#cc4;
  }
  
  .footer {
    background-color:#4cc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;app&gt;
      &lt;section class="header"&gt;
          Header
      &lt;/section&gt;
  
      &lt;section class="middle"&gt;
          Middle
      &lt;/section&gt;
  
      &lt;section class="footer"&gt;
          Footer
      &lt;/section&gt;
  &lt;/app&gt;</code></pre>
  </div>
  </div>
  </p>