javascript - jQuery on click div 具有 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

使用固定定位。

$('#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 以将叠加层拉伸(stretch)到视口(viewport)的大小。

Demo