让 Div 覆盖整个页面（不仅仅是视口）？答案

【问题标题】：Make Div overlay ENTIRE page (not just viewport)?让 Div 覆盖整个页面（不仅仅是视口）？
【发布时间】：2011-02-20 14:10:15
【问题描述】：

所以我有一个我认为很常见的问题，但我还没有找到一个好的解决方案。我想让一个覆盖 div 覆盖整个页面......不仅仅是视口。我不明白为什么这很难做到……我尝试将正文、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。

【问题讨论】：

还可以在这里阅读更多内容：stackoverflow.com/questions/1938536/…
这可以用 jQuery 实现吗？

标签： html css

【解决方案1】：

我遇到了很多麻烦，因为我不想将叠加层固定到位，因为我希望叠加层内的信息可以在文本上滚动。我用过：

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

当然，中间的 div 需要一些内容，并且可能需要一个透明的灰色背景，但我相信你明白了要点！

【讨论】：

【解决方案2】：

我看了上面 Nate Barr 的回答，你似乎很喜欢。看起来和更简单的没有太大区别

html {background-color: grey}

【讨论】：

【解决方案3】：

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

【讨论】：

最好的解决方案。您只需为 body 切换“overlayed”类并将上面的样式应用到具有该 className 的 body。
请详细解释这个答案。我不明白斯维亚托斯拉夫的评论。

【解决方案4】：

视口是最重要的，但您可能希望整个网站即使在滚动时也保持黑暗。为此，您想使用position:fixed 而不是position:absolute。固定将在您滚动时使元素在屏幕上保持静止，给人一种整个身体都变暗的印象。

示例：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>

【讨论】：

我可能错了，但是在IE6中可以定位固定的工作吗？！我知道可能没有人再关心 IE6 了。
@Marco 不确定。老实说，如果没有明确要求对 10 年前的浏览器的支持，我不会再打扰了 :)
那么你们是如何在移动设备上做到这一点的呢？ bradfrostweb.com/blog/mobile/fixed-position
+1 谢谢！我通过在叠加层上方添加一个弹出窗口来扩展您的示例：jsbin.com/okabo3/740
我遇到的问题（许多插件都使用它）是当您在 iOS 中单击 <select> 元素时，它会移动整个视口并基本上破坏一切。固定元素移动，不应该滚动的东西滚动等等。

【解决方案5】：

首先，我认为您误解了视口是什么。视口是浏览器用来呈现网页的区域，您不能以任何方式构建您的网站来以任何方式覆盖该区域。

其次，您的overlay-div 不会覆盖整个视口 的原因似乎是因为您必须删除BODY 和HTML 上的所有边距。

尝试在样式表的顶部添加它 - 它会重置所有元素的所有边距和填充。使进一步的开发更容易：

* { margin: 0; padding: 0; }

编辑：我只是更好地理解了你的问题。Position: fixed;可能会为你解决问题，正如 Jonathan Sampson 所写的那样。

【讨论】：

您不应该从 everything 中删除填充和边距。为按钮和表单输入等许多元素恢复这些可能真的很费力。
在我看来，这只是一种非常简单的方法，可以在浏览器中将所有内容都视为相同。今天可能不像以前适应 IE5 那样适用，但我仍然把它作为我在样式表中写的第一件事。
@Arve 它可以让你接近，但最好使用经过时间考验的重置表。查看meyerweb.com/eric/tools/css/reset 了解更多信息 - 你会喜欢的，我向你保证 :)
看过了，就是觉得太大了:)
@Arve 重置并没有那么大 - 尝试从 *{} 完全恢复，你会看到更多:)