CSS：如何获得这个覆盖滚动扩展100％？
这是一个问题的例子：
http://dev.madebysabotage.com/playground/overlay.html
您会看到整个页面上都有一个灰色的叠加层，但是如果向下滚动，则初始加载的页面下方的内容将没有叠加层。
我有一个#overlay div，它似乎并没有保持在滚动100％的高度，所以试图找出如何拉断。
以下是完整的来源：
<!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; 在覆盖。
更改#overlay position:absolute position:fixed
发生这种情况是因为#overlay position: absolute是相对于<html>并使用它的尺寸，这只是视口的高度。
为了确保#overlay使用整个页面的尺寸，可以使用position: relative; 在<body> （但是你需要首先删除<body>中的min-height: 100%和height: 100% ，因为这使得它使用视口大小）。 然后， #overlay将使用<body>尺寸并填充整个页面。
