title: Fixed div height:100% on mobile devices when scrolling doesn't fill screen
body: <p>I have a responsive <code>nav</code> element. The <code>nav</code> is <code>position:fixed</code>. When clicked it has <code>top:0 bottom:0</code> (I've also tried height:100%) <code>left:0 and right:0</code>. Hence the nav element overlays the entire screen.</p>
  
  <p>However on mobile devices if I scroll down, the browser address bar (Safari and Chrome on my iPhone) gets shorter or disappears all together - making the viewport higher. Yet the height of the nav element stays the same, meaning that it no longer covers the full screen and there is a strip at the bottom showing the content behind.</p>
  
  <p>How do I resolve this? (I've also tried <code>height:100vh</code>). I don't want to use JS or JQ.</p>
  
  <p>Thank you</p>
  
  <pre><code>nav {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:black;
  }
  
  
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="workshops.html"&gt;Workshops&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Basically the element is not growing in height to respond to the larger viewport height. The elements height is staying the same, dispite the browser address bar disappearing (in Chrome)</p>