title: How to make a div 100% of page (not screen) height?
body: <p>I'm trying to use CSS to create a 'greyed out' effect on my page while a loading box is displayed in the foreground while the application is working. I've done this by creating a 100% height/width, translucent black div which has its visibility toggled on/off via javascript. I thought this would be simple enough; however, when the page content expands to the point that the screen scrolls, scrolling to the foot of the page reveals a portion which is not greyed out. In other words, the 100% in the div's height seems to be applying to the browser viewport size, not the actual page size. How can I make the div expand to cover the whole of the page's content? I've tried using JQuery .css('height', '100%') before toggling it's visibility on but this doesn't change anything.</p>
  
  <p>This is the CSS of the div in question:</p>
  
  <pre><code>div.screenMask
  {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 1000;
      background-color: #000000;
      opacity: 0.7;
      filter: alpha(opacity=70);
      visibility: hidden;
  }
  </code></pre>
  
  <p>Thanks.</p>