title: Mobile CSS height 100% + browser chrome?
body: <p>Im want a div to take up 100% of the viewport for mobile devices. Initially I just set it’s height and width to 100%. </p>
  
  <p>However now I’m hiding the browser chrome with the following JavaScript:</p>
  
  <pre><code>setTimeout(function() { 
  window.scrollTo(0, 1) }, 
  100);
  </code></pre>
  
  <p>The result is that the height is 100% minus the browser chrome height. Also, the javascript works by scrolling down the page enough that the chrome is hidden, and this can only happen if the page is taller than the div im using. </p>
  
  <p>How can I get around this? Is the only way to use device detection and add the browser chrome height value in pixels on a per device basis? Id like to avoid this if possible. Thanks </p>