所以我有一个我认为很常见但我还没有找到好的解决方案的问题。我想让一个覆盖 div 覆盖整个页面......而不仅仅是视口(viewport)。我不明白为什么这很难做到...我已经尝试将 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>
如果存在 JavaScript 解决方案，我也愿意接受，但我更愿意只使用一些简单的 CSS。
最佳答案
视口(viewport)是最重要的，但您可能希望整个网站即使在滚动时也保持黑暗。为此，您需要使用 position:fixed 而不是 position:absolute。固定将使元素在您滚动时在屏幕上保持静止，给人的印象是整个 body 都变暗了。
示例: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>
关于html - 让 Div 覆盖整个页面(不仅仅是视口(viewport))？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2852276/