How to make a div 100% of page (not screen) height?

Question

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 c

Answer 1

If you change position: absolute to position: fixed it will work in all browsers except IE6. This fixes the div to the viewport, so it doesn't move out of view when scrolling.

You can use $(document).height() in jQuery to make it work in IE6 too. E.g.

$('.screenMask').height($(document).height());

That would obviously fix it for all the other browsers too, but I prefer not using JavaScript if I can avoid it. You'd need to do the same thing for the width too, actually, in case there's any horizontal scrolling.

There are plenty of hacks around to make fixed positioning work in IE6 too, but they tend to either impose some other limitations on your CSS, or use JavaScript, so they're likely not worth the trouble.

Also, I presume you have only one of these masks, so I'd suggest using an ID for it instead of a class.