jQuery on click div 100% 屏幕高度答案

【问题标题】：jQuery on click div with 100% screen heightjQuery on click div 100% 屏幕高度
【发布时间】：2014-05-16 22:50:51
【问题描述】：

当我点击#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% 而不依赖于屏幕分辨率？

谢谢

【问题讨论】：

使用固定位置，这样它在滚动过程中就停留在同一个地方

标签： javascript jquery html css

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

【讨论】：

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

【讨论】：