CSS div to 100% of page size

okanagan used Ask the Experts™
Hi -

I need a div to be 100% of the page height, rather than the browser window height.  Here's my div style:

#lyrMask {
      z-index: 2;  
      visibility: hidden;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 200%;
      -moz-opacity: 0.6;
      opacity: .60;
      filter: alpha(opacity=60);
      background-color: #CCC;

This is a mask over which I place a "pop-up" for users to make a selection on.  The mask is to prevent them from clicking anything else on the underlying page and to focus their attention on the div placed on top of the mask outlined above.  The problem is that they can simply scroll down the page, and since the mask is only as high as the browser window, they have access to any links below the mask.

Any ideas?


Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2007

Set all it's ancestor elements' height to 100%, including html and body:

html, body {height:100%;}

#theMasksParent {height:100%;}
and so on...
Senior Developer
how about setting up the height of DIV using javaScript.

This Function will return full page height.

function getPageSizeWithScroll(){     if (window.innerHeight && window.scrollMaxY) {// Firefox         yWithScroll = window.innerHeight + window.scrollMaxY;         xWithScroll = window.innerWidth + window.scrollMaxX;     } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac         yWithScroll = document.body.scrollHeight;         xWithScroll = document.body.scrollWidth;     } else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari         yWithScroll = document.body.offsetHeight;         xWithScroll = document.body.offsetWidth;       }     arrayPageSizeWithScroll = new Array(xWithScroll,yWithScroll);     //alert( 'The height is ' + yWithScroll + ' and the width is ' + xWithScroll );     return arrayPageSizeWithScroll;


Then use another function with onClick event to set page height up.

function setDivHeight(obj) {
  h = getPageSizeWithScroll(){    
  document.getElementById(obj).style.height = h

add this ...

onClick="setDivHeight('DIV NAME HERE')"

also dont forget to remove height Code from CSS.

any idea why on ie7 i get 4 pixels to many in the result for height returned by getPageSizeWithScroll  ?


Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial