覆盖div不再在屏幕高度发生变化后填满屏幕

Question

我有一个覆盖div，用于加载Ajax请求时。对于DIV的CSS大致是这样的：

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

我使用基本的jQuery来显示它：

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

问题是事情是我用JavaScript网页上动态变化的，所以的高度页面发生变化，之后叠加层不再填充屏幕。

什么可以添加到JS强制覆盖每次调整到正确的大小？

Answer 1

为什么使用高度和宽度100％？这些值在IE上太多了。只使用固定的值：

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

有了这个代码，你会得到ajax-overlaydiv填充屏幕无论在页面的其余部分会发生什么。

Answer 2

改变位置，以“固定”

Answer 3

一个接位置
例如要么做

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

或

$(function(){ 
    $(window).resize(function(){ 
     var h = $(window).height(); 
     var w = $(window).width(); 
     $('#ajax-overlay').css("width",w).css("height",h); 
    }); 
});