title: Make full page white
body: <p>My website is currently like this on little screens:<br>
  <a href="http://d.pr/i/KwI8+" rel="nofollow noreferrer">http://d.pr/i/KwI8+</a></p>
  
  <p>And on big screens it's like<br>
  <a href="http://d.pr/i/ckmF+" rel="nofollow noreferrer">http://d.pr/i/ckmF+</a></p>
  
  <p>But I need to have it like this:<br>
  <a href="http://d.pr/i/IJc7+" rel="nofollow noreferrer">http://d.pr/i/IJc7+</a></p>
  
  <p>Live demo is on <a href="http://www.random-radio.net/" rel="nofollow noreferrer">http://www.random-radio.net/</a></p>
  
  <p>CSS</p>
  
  <pre><code>html, body{
      width:100%; 
      min-height: 100%;
      height: auto !important;        
      height:100%;
  
      margin:0 !important;
      padding:0 !important;
      opacity: 0.99;
  
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
  
      background-color: #cfcfcf;
  }
  
  #page
  {
      position: relative;
      top: 0px;
      bottom: 0;
      left: 50%;
      margin-left: -512px;
      width: 1024px;
      overflow: visible;
      background-color: #FFF;
      /*margin-left: auto;
      margin-right: auto;*/
  }
  </code></pre>
  
  <p>I want a <code>div</code> from the top of the page to the bottom of the page.
  I'm currently trying to use the above CSS, but on a screen that is higher than the content of the <code>div</code>, the background gets the <code>#cfcfcf</code> background of the body</p>