以下是所讨论问题的示例:
http://dev.madebysabotage.com/playground/overlay.html 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)