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

DEMO

+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>');
});

DEMO2

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以将叠加层拉伸到视口大小。

Demo

点击div上的jQuery，屏幕高度为100％

2 个答案: