屏幕高度更改后，覆盖 div 不再填满屏幕答案

【问题标题】：Overlay div no longer fills screen after the screen height has changed屏幕高度更改后，覆盖 div 不再填满屏幕
【发布时间】：2011-11-30 14:13:14
【问题描述】：

我有一个覆盖 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 中添加什么来强制叠加层每次都调整到正确的大小？

【问题讨论】：

position: relative<body> 上的我们有可能吗？

标签： jquery css

【解决方案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。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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);
    });
});

【讨论】：