title: HTML/CSS - Scroll bar appears for simple image within div with 100% height
body: <p>I have this simple bit of HTML below, it has a div, which is absoutely position 0,0 to 100%, 100%.   Within the div is an image with width 100%, height, 100%.   I used the google image for this example, but it can be any image.</p>
  
  <p>It creates a vertical scrollbar (in Chrome anyway). </p>
  
  <p>Does anyone know how to avoid that.   I know I can add "overflow: hidden", but if there is other content on the page that goes beyond the 100% screen height, I want it to scroll.  So I don't want to do that.</p>
  
  <p>I can also make it height: 99%, but that's not exactly elegant. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html style="margin: 0px; padding: 0px; height: 100%; width: 100%;"&gt;
      &lt;body style="margin: 0px; padding: 0px; height: 100%; width: 100%;"&gt;
          &lt;div id="divBackDrop" style="position: absolute; top: 0px; left: 0px; height:100%; width: 100%; border: 0px solid red;"&gt;&lt;img src="https://www.google.com/images/srpr/logo11w.png" style="height: 100%; width: 100%;" /&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Just seems like it should work the way it is - I mean there is no horizontal scrollbar, and the width is set up exactly the same way. </p>