Question

I’ve got an overlay div that I use for when Ajax requests are loading. The CSS for the div is roughly this:

#ajax-overlay {
    z-index:9999;
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
}

I use the basic jQuery to show it:

$('#ajax-overlay').show();

The problem is things are changing dynamically on my page with JavaScript, so the height of the page changes, after which the overlay no longer fills the screen.

What can I add to the JS to force the overlay to resize every time to the correct size?

Answer 1

Why do you use width and height 100%? Those values are too buggy on IE. Use just the fixed values:

#ajax-overlay {
   z-index:9999;
   display:none;
   position:fixed;
   top:0;
   left:0;
   bottom: 0;
   right: 0;
   background:#000;
   opacity:0.8;
}

With this code you will get the ajax-overlay div filling the screen no matter what happens on the rest of the page.