屏幕高度发生变化后，叠加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，因此页面的高度会发生变化，之后叠加层不再填充屏幕。

我可以添加什么来强制叠加层每次调整到正确的大小？

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-overlay div。

Answer 2

将您的位置更改为“固定”

Answer 3

一个人要么按位置来做 的 e.g。

#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);
    });
});