title: Fixed position, 100% height element, not always 100% on mobile
body: <p>I want a 40px, 100% height element that is fixed to the left of my responsive website, obviously I need it to be 100% at all times and it works fine on desktop browsers.</p>
  
  <p>The problem arises when I'm on a mobile browser (nexus 7, Chrome). Keeping your finger pressed on the screen, the 100% height seems to be off by ~10%, until you let go and the element becomes 100% again.</p>
  
  <p>There is a url bar that appears, briefly when scrolling, then disappears I believe it is that which is offsetting the 100% height.</p>
  
  <p>So the problem appears to be Chrome's URL bar and probably other mobile browser URL bars that act in the same way, how do I get around this?</p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>div#dummyMenu{
  width:40px; 
  position:fixed; 
  top:0; 
  bottom:0; 
  left:0; 
  background-color:#444;
  } 
  </code></pre>
  
  <p>I even threw in some <strong>jQuery</strong> to doubly make sure but still the same problem:</p>
  
  <pre><code>jQuery(document).on("scroll",function(){
      var documentHeight = jQuery(document).height();
      jQuery('#dummyMenu').css('height',documentHeight);
  });
  </code></pre>