CSS：如何获得这个覆盖以100％滚动？ [英] CSS: How to get this overlay to extend 100% with scrolling?
本文介绍了CSS：如何获得这个覆盖以100％滚动？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是相关问题的示例：
Here is an example of the issue in question:
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.
我有一个 #overlay div
以下是完整的源代码：
<!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>
推荐答案
position：fixed; / code>。
position: fixed; on the overlay.
这篇关于CSS：如何获得这个覆盖以100％滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
