CSS：如何让这个覆盖层通过滚动扩展 100%？答案

【问题标题】：CSS: How to get this overlay to extend 100% with scrolling?CSS：如何让这个覆盖层通过滚动扩展 100%？
【发布时间】：2011-01-10 15:33:48
【问题描述】：

您会看到整个页面上有一个灰色叠加层，但如果您向下滚动，初始加载页面下方的内容没有叠加层。

我有一个#overlay div，它似乎在滚动过程中没有保持 100% 的高度，所以试图弄清楚如何将其拉下来。

这是完整的来源：

html {
  height: 100%;
  min-height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
  font-family: Georgia, sans-serif;
}

#overlay {
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
}

header,
section,
footer {
  width: 800px;
  margin: 0 auto 20px auto;
  padding: 20px;
  background: #ff0;
}

section {
  min-height: 1500px;
}

<div id="overlay"></div>
<header>
  <h1>Header</h1>
</header>
<section>
  <p>Here's some sweet content</p>
</section>
<footer>
  <p>Here's my footer</p>
</footer>

【问题讨论】：

谢谢！对于其他阅读者，问题已在上面的链接中修复。要重新创建它，请使用 Firebug 或类似工具从覆盖 id 中删除 position:fixed; :)
3 年后我遇到了同样的问题 :) +1 提问

标签： html css overlay

【解决方案1】：

position: fixed; 在叠加层上。

【讨论】：

您注意到 IE6 不支持固定位置。但考虑到您使用的是 rgba 值，我猜您根本不关心 IE。 :p
谁做的？ ;)（我们都应该）哈
好的，那么平板电脑和移动设备呢？
8 年后 - 添加“溢出：隐藏；”在打开覆盖时添加到正文以避免在某些浏览器中出现双滚动条。
如果覆盖不是相对于body，而是相对于一些有滚动的子元素怎么办？

【解决方案2】：

将#overlayposition:absolute更改为position:fixed

【讨论】：

【解决方案3】：

发生这种情况是因为 #overlay position: absolute 是相对于 <html> 并使用它的尺寸，这只是视口高度。

要确保#overlay 使用整个页面的尺寸，您可以在<body> 上使用position: relative;（但您需要先在<body> 上删除min-height: 100% 和height: 100%因为这使它使用视口大小）。然后#overlay 将使用<body> 尺寸并填充整个页面。

【讨论】：