Html CSS：如何让这个叠加层通过滚动扩展 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4648418/
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
CSS: How to get this overlay to extend 100% with scrolling?
提问by Shpigford
Here is an example of the issue in question:
以下是相关问题的示例：
http://dev.madebysabotage.com/playground/overlay.html
http://dev.madebysabotage.com/playground/overlay.html
You see there is a gray overlay over the entire page, but if you scroll down, the content below the initial loaded page doesn't have the overlay.
您会看到整个页面上有一个灰色覆盖层，但是如果向下滚动，初始加载页面下方的内容没有覆盖层。
I have an #overlaydiv and it seems it doesn't keep the 100% height during scrolling, so trying to figure out how to pull that off.
我有一个#overlaydiv，它似乎在滚动过程中没有保持 100% 的高度，所以试图弄清楚如何实现它。
Here's the full source:
这是完整的来源：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Overlay</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<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>
</body>
</html>
回答by benhowdle89
position: fixed;on the overlay.
position: fixed;在叠加层上。
回答by Bazzz
Change #overlayposition:absoluteto position:fixed
更改#overlayposition:absolute为position:fixed
回答by Thom
This happens because the #overlayposition: absoluteis relative to the <html>and using it's dimensions, which is only the viewport height.
发生这种情况是因为#overlayposition: absolute相对于<html>并且使用它的尺寸，这只是视口高度。
To make sure that the #overlayuses the dimensions of whole page, you could use position: relative;on the <body>(but you will need to remove the min-height: 100%and height: 100%on the <body>first because this makes it use the viewport size). The #overlaywill then use the <body>dimensions and fill the entire page.
为确保#overlay使用整个页面的尺寸，您可以使用position: relative;on <body>（但您需要在第一个上删除min-height: 100%和height: 100%，<body>因为这使其使用视口大小）。然后#overlay将使用<body>尺寸并填充整个页面。
