title: DIV background-color does not fill 100% height when scrolling
body: <p>When I scroll down my div background-color still does not update, 
  it's 100% height to the bottom of the page. See my screenshot here:</p>
  
  <p><img src="https://i.stack.imgur.com/ZJNjD.jpg" alt=""></p>
  
  <p>See the following code on my <a href="http://jsfiddle.net/p7v39xot/" rel="nofollow noreferrer">JSFiddle example</a>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;style&gt;
  body {
          width: 100%; height: 100%; margin: 0 auto;
          background: orange; color: #000000;
          font-family: "Century Gothic", "Apple Gothic", Verdana, sans-serif;
  }
  #container {
          width: 800px; height: 100%;
          position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;
  }
  #page {
          background: #FFFFFF;
          padding: 1.1em;
          position: absolute; top: 0; bottom: 0; left: 3px; right: 3px
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="page"&gt;
      &lt;u&gt;Page Title&lt;/u&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;b&gt;Content&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      Lorem Ipsum&lt;br /&gt;&lt;br /&gt;Lorem Ipsum&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do I tell the div <code>#page</code> to stretch its white background-color 
  further on to the bottom of the page when I scroll down?</p>
  
  <p>If I use <code>min-height: 100%;</code> and <code>position: relative;</code> in <code>#page</code> it
  produces the scrollbar on the right:</p>
  
  <p><img src="https://i.stack.imgur.com/wXE4v.jpg" alt=""></p>