HTML overlay height to cover entire visible page

Question

I have a web page that loads some stuff using AJAX. I want to display an overlay with a loading indicator while the loading is in progress, so that the user cannot interact with most of the page - except the menu at the top. I'm using jQuery and the jQuery BlockUI plugin to do this.

I call $(element).block() and it works fine, but the overlay only extends as far down as the current content of my page. As more content is loaded and added to the page the overlay moves down with it and this looks a bit ugly. Ideally I'd like it to cover the entire visible area of the page right from the start. A simple hack for doing this would be to set a large height value for the overlay, like this:

$(myElement).block({
        overlayCSS: {
            height: '10000px'
        }
 });

... but this creates a scrollbar! How do I avoid this and make it just the right height to cover the visible page, but not enlarge it?

Answer 1

Use position: fixed; instead of position: absolute. This way the overlay will not move even if you scroll.

Answer 2

In XHTML the html and body elements are not quite as magical as in HTML. The body element doesn't fill the viewport (window) automatically, it's size is only as tall as it's contents.

To make an element fill the window you first have to make the html and body elements fill the window:

html, body { height: 100%; }

Then you can use height: 100%; on an element in the body to make it cover the full height.