點擊div時jQuery的屏幕高度為100％

Question

當我單擊#Thumb時，我正在使用jquery創建一個覆蓋div，如下所示：

$('#Thumb').click( function() { 
     $('body').append('<div id="overlayFrame" onclick="unloadPhoto()" style="position:absolute;width:100%;height:100%;top:0px;left:0px; background: rgba(0, 0, 0, 0.8); z-index:100;"></div>');
});

問題是：100％的高度僅適用於可見區域，我必須滾動到的所有區域都未被div覆蓋。

有什么想法可以使div占整個頁面的100％，而不取決於屏幕分辨率嗎？

謝謝

Answer 1

將$( document ).height()設置為高度，將div的高度設置為等於文檔的height:'+$( document ).height()+'px;

嘗試：

$('#Thumb').click( function() { 
     $('body').append('<div id="overlayFrame" onclick="unloadPhoto()" style="position:absolute;width:100%;height:'+$( document ).height()+'px;top:0px;left:0px; background: rgba(0, 0, 0, 0.8); z-index:100;"></div>');
});//-------------------------------------------------------------------------------------------------------------------^ ADD THIS

演示

+1 Patrick Evans可以將位置從absolute更改為fixed如下所示：

 $('#Thumb').click( function() { 
     $('body').append('<div id="overlayFrame" onclick="unloadPhoto()" style="position:fixed;width:100%;height:100%;top:0px;left:0px; background: rgba(0, 0, 0, 0.8); z-index:100;"></div>');
});

演示2

Answer 2

使用固定位置。

$('#Thumb').click( function() { 
     $('body').append('<div id="overlayFrame" onclick="unloadPhoto()" style="position:fixed;width:100%;height:100%;top:0px;left:0px;right:0;bottom:0;background: rgba(0, 0, 0, 0.8); z-index:100;"></div>');
});

請注意，添加了right:0和bottom:0可以將疊加層拉伸到視口的大小。

演示版