title: Outter page wrap doesn't set for the height of the whole page
body: <p>I have the following code that does not cover the full page height if a page has content beyond the normal view port (not having to scroll). If I scroll down the outer div displays for just a small bit and that goes back to white.</p>
  
  <p>Why is the outer div not taking the full height of the page even if it requires scrolling?</p>
  
  <pre><code>  html ,body {
      height: 100%;
      font-style: Helvetica;
  }
  .page_background, .page { margin: 0 auto; }
  .page_background {
      width: 100%;
      min-height: 100%;
      background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
      background: linear-gradient(#282828, #888888); /* Standard syntax */
      position: absolute;
      /*height: 100%;*/
  }
  .page {
      background-color: #FFFFFF;
      width: 85%;
      min-height: 100%;
      bottom: 0;
      position: absolute;
      height: 100%;
      left: 7.5%;
  }
  
          &lt;div class="page_background"&gt;
              &lt;div class="page"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I created a fiddle to demonstrate what I am doing. You can even see if you scroll in the fiddle, it doesn't take the gray border.</p>
  
  <p><a href="https://jsfiddle.net/1qwwtgjp/" rel="nofollow">https://jsfiddle.net/1qwwtgjp/</a></p>