Html 使 Div 覆盖整个页面（不仅仅是视口）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2852276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Div overlay ENTIRE page (not just viewport)?
提问by Polaris878
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:
所以我有一个我认为很常见的问题，但我还没有找到一个好的解决方案。我想让一个覆盖 div 覆盖整个页面......不仅仅是视口。我不明白为什么这很难做到……我试过将 body、html 高度设置为 100% 等，但这不起作用。这是我到目前为止所拥有的：
<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>
I'd also be open to a solution in JavaScript if one exists, but I'd much rather just be using some simple CSS.
如果存在 JavaScript 中的解决方案，我也愿意接受，但我更愿意使用一些简单的 CSS。
回答by Sampson
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:fixedinstead of position:absolute. Fixed will keep the element static on the screen as you scroll, giving the impression that the entire body is darkened.
视口很重要，但您可能希望整个网站即使在滚动时也保持黑暗。为此，您想使用position:fixed代替position:absolute. 当您滚动时，Fixed 将使元素在屏幕上保持静止，给人的印象是整个身体都变暗了。
Example: http://jsbin.com/okabo3/edit
示例：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>
回答by Nate Barr
body:before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
回答by Arve Systad
First of all, I think you've misunderstood what the viewport is. The viewport is the area a browser uses to render web pages, and you cannot in any way build your web sites to override this area in any way.
首先，我认为您误解了视口是什么。视口是浏览器用来呈现网页的区域，您不能以任何方式构建您的网站来以任何方式覆盖该区域。
Secondly, it seems that the reason that your overlay-div won't cover the entire viewportis because you have to remove all margins on BODY and HTML.
其次，您的overlay-div 不会覆盖整个视口的原因似乎是因为您必须删除BODY 和HTML 上的所有边距。
Try adding this at the top of your stylesheet - it resets all margins and paddings on all elements. Makes further development easier:
尝试将它添加到样式表的顶部 - 它会重置所有元素的所有边距和填充。使进一步的开发更容易：
* { margin: 0; padding: 0; }
Edit:
I just understood your question better.Position: fixed;will probably work out for you, as Jonathan Sampson have written.
编辑：我只是更好地理解了你的问题。Position: fixed;正如乔纳森·桑普森 (Jonathan Sampson) 所写，这可能对您有用。
回答by Justin Munce
I looked at Nate Barr's answer above, which you seemed to like. It doesn't seem very different from the simpler
我看了上面 Nate Barr 的回答，你似乎很喜欢。看起来和简单的没有太大区别
html {background-color: grey}
