title: Make Div overlay ENTIRE page (not just viewport)?
body: <p>So I have a problem that I think is quite common but I have yet to find a good solution for.  I want to make an overlay div cover the ENTIRE page... NOT just the viewport.  I don't understand why this is so hard to do...  I've tried setting body, html heights to 100% etc but that isn't working.  Here is what I have so far:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
      .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
      body { height: 100%; }
      html { height: 100%; }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div style="height: 100%; width: 100%; position: relative;"&gt;
          &lt;div style="height: 100px; width: 300px; background-color: Red;"&gt;
          &lt;/div&gt;
          &lt;div style="height: 230px; width: 9000px; background-color: Green;"&gt;
          &lt;/div&gt;
          &lt;div style="height: 900px; width: 200px; background-color: Blue;"&gt;&lt;/div&gt;
          &lt;div class="OverLay"&gt;TestTest!&lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>I'd also be open to a solution in JavaScript if one exists, but I'd much rather just be using some simple CSS.</p>