弹出div以填充整个浏览器的宽度和高度 [英] Popup div to fill entire browser width and height
问题描述
我弹出一封电子邮件，其中包含一个背景div，以便在网站触发时"灰显".问题在于，该div仅占用可见屏幕，并且如果用户决定滚动，则可以看到"未变灰的"网站的其余部分.
I have an email pop up that has a background div to "grey out" the website when it triggers. The problem is that this div only takes up the visible screen and if a user decides to scroll they can see the rest of the "non-greyed out" site.
我做了一个小提琴来简化和重现该问题(请参见上文)，并且我还在下面包括了它的代码.我正在尝试使div通过绝对定位来占据整个屏幕(正如许多其他SO答案所建议的那样)，但是当存在其他div时，此策略将失败.知道如何解决吗?
I made a fiddle to simplify and reproduce the problem ( please see above ), and I have also included its code below. I'm trying to make the div take the entire screen through absolute positioning (as many other SO answers have suggested), but this tactic fails when there are other divs present. Any idea how to get around it?
html:
<body>
<div class="other_things"></div>
<div id="full"></div>
<div class="other_things"></div>
<div class="other_things"></div>
<div class="other_things"></div>
</body>
CSS:
#full {
background: rgba(0,0,0,.6);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.other_things {width:40em; height: 50em;}
类似的问题及其答案:
推荐答案
而不是使用position:absolute，而是使用position:fixed，它将固定在窗口上，而不是最近的具有非静态位置的div.
Instead of using position: absolute, use position: fixed which will attach to the window instead of the nearest div with a non-static position.
#full {
background: rgba(0,0,0,.6);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.other_things {width:40em; height: 50em;}
您可以在 http://jsfiddle.net/gUmPR/
这篇关于弹出div以填充整个浏览器的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
