logo标签列表

CSS：如何使此叠加层在滚动时延伸至100%？

htmlcssoverlay
61
这里是一个相关问题的示例：http://dev.madebysabotage.com/playground/overlay.html。 你会发现整个页面都覆盖了一层灰色的覆盖层。但如果你往下滚动，最初加载页面下方的内容不会有这个覆盖层。 我有一个名为#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;” :) - RyanM
1
三年后，我仍然遇到了同样的问题 :) 对于这个问题点赞。 - I am Cavic
3个回答
178

position: fixed;在遮罩层上的作用。

你提醒说，固定位置在IE6中不被支持。但考虑到你正在使用rgba值，我猜你完全不关心IE。 :p - Dan
1
谁做呢？ ;) （我们都应该做）哈 - benhowdle89
好的，现在平板电脑和移动设备怎么办？ - BorisOkunskiy
8年后 - 当叠加层打开时，添加"overflow: hidden;"到body中，以避免在某些浏览器中出现双滚动条。 - Bogdan
如果叠加层不是相对于 body，而是某个具有滚动的子元素呢？ - Robin Wieruch
10

将 #overlay 的 position:absolute 改为 position:fixed

6
这是因为 #overlay 的 position: absolute 属性相对于 <html>，而它的尺寸仅限于视口高度。
要确保 #overlay 使用整个页面的尺寸，您可以在 <body> 上使用 position: relative;（但您需要先删除 <body> 上的 min-height: 100% 和 height: 100%，因为这会使其使用视口大小）。然后，#overlay 将使用 <body> 的尺寸并填充整个页面。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接