jquery - 屏幕高度改变后，Overlay 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-overlay div 填充屏幕。