制作Div叠加层ENTIRE页面（而不仅仅是视口）？ [英] Make Div overlay ENTIRE page (not just viewport)?
问题描述
所以我有一个问题，我认为是很常见的，但我还没有找到一个很好的解决方案。我想使覆盖div覆盖ENTIRE页面，而不只是视口。我不明白为什么这么难以做...我已经尝试设置身体，html高度到100％等，但这是不工作。这是我到目前为止：
So I have a problem that I think is quite common but I have yet to find a good solution for. I want to make an overlay div cover the ENTIRE page... NOT just the viewport. I don't understand why this is so hard to do... I've tried setting body, html heights to 100% etc but that isn't working. Here is what I have so far:
<html>
<head>
<style type="text/css">
.OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
body { height: 100%; }
html { height: 100%; }
</style>
</head>
<body>
<div style="height: 100%; width: 100%; position: relative;">
<div style="height: 100px; width: 300px; background-color: Red;">
</div>
<div style="height: 230px; width: 9000px; background-color: Green;">
</div>
<div style="height: 900px; width: 200px; background-color: Blue;"></div>
<div class="OverLay">TestTest!</div>
</div>
</body>
</html>
如果存在JavaScript，我也可以使用JavaScript解决方案，但我更愿意只要使用一些简单的CSS。
I'd also be open to a solution in JavaScript if one exists, but I'd much rather just be using some simple CSS.
推荐答案
视口就是重要的，但你可能希望整个网站保持黑暗同时滚动。为此，您要使用 position：fixed 而不是 position：absolute 。
The viewport is all that matters, but you likely want the entire website to stay darkened even while scrolling. For this, you want to use position:fixed instead of position:absolute. Fixed will keep the element static on the screen as you scroll, giving the impression that the entire body is darkened.
示例： http://jsbin.com/okabo3/edit
div.fadeMe {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
<body>
<div class="fadeMe"></div>
<p>A bunch of content here...</p>
</body>
这篇关于制作Div叠加层ENTIRE页面（而不仅仅是视口）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
