覆蓋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); 
    }); 
});