title: Absolute DIV height 100%
body: <p>I have been working on this for the past couple of hours, and searching the web and stackoverflow hasn't been much support. How do I make <code>#gradient</code> and <code>#holes</code> fill the entire page?</p>
  
  <p>I have used the Inspect Element feature in Safari, and when I highlight the body element it does not fill the entire window.<br>
  <a href="https://i.stack.imgur.com/C1cNw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C1cNw.png" alt="alt text"></a>
  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="gradient"&gt;&lt;/div&gt;
      &lt;div id="holes"&gt;&lt;/div&gt;
  
      &lt;div id="header"&gt;Header Text&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>html, body {
      height:100%;
  
      margin:0;
      padding:0;
  }
  
  body {
      background-image:url(../Images/Tile.png);
      background-color:#7D7D7D;
      background-repeat:repeat;
  }
  
  #gradient {
      background-image:url(../Images/Background.png);
      background-repeat:repeat-x;
  
      position:absolute;
      top:0px;
      left:0px;
      height:100%;
      right:0px;
  }
  
  #holes {
      background-image:url(../Images/Holes.png);
      background-repeat:repeat;
  
      position:absolute;
      top:2px;
      left:2px;
      height:100%;
      right:0px;
  }
  
  #header {
      background-image:url(../Images/Header.png);
      background-repeat:repeat-x;
  
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
  
      padding-top:24px;
      height:49px; /* 73 - padding */
  
      color:rgb(113, 120, 128);
      font-family:Helvetica, Arial;
      font-weight:bold;
      font-size:24px;
      text-align:center;
      text-shadow:#FFF 0px 1px 0px;
  }
  </code></pre>