title: Make DIV cover 100% of viewport instead of 100% of Body
body: <p>My post is in regards to <a href="http://www.thepostboard.net" rel="noreferrer">http://www.thepostboard.net</a></p>
  
  <p>I need to make the black box that is currently covering 100% of the viewport cover the entire page instead. You'll only be able to notice this if your screen needs a scrollbar to view the website--otherwise it looks fine.</p>
  
  <p>I have the overlaying div set to:</p>
  
  <pre><code>position: absolute;
  height: 100%;
  width: 100%;
  </code></pre>
  
  <p>I also have body set to:</p>
  
  <pre><code>height: 100%;
  margin: 0px 0px;
  padding: 0px; 0px;
  </code></pre>
  
  <p>But for some reason on my laptop if I scroll down I see the edge of the DIV and nothing is blocked off underneath it.</p>
  
  <p>The purpose of this is to create a custom lightbox for the website. I have disabled the Javascript that dims the box so you can see the effect.</p>
  
  <p>How do I make it cover the entire page, not just the viewport?</p>
  
  <p>(My laptop is a 1366x768, so presumably you'd see it on anything with a height resolution &lt;= 760).</p>