CSS: How to get this overlay to extend 100% with scrolling?

问题

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.

I have an #overlay div and it seems it doesn't keep the 100% height during scrolling, so trying to figure out how to pull that off.

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>

回答1:

position: fixed; on the overlay.

回答2:

Change #overlay position:absolute to position:fixed

回答3:

This happens because the #overlay position: absolute is relative to the <html> and using it's dimensions, which is only the viewport height.

To make sure that the #overlay uses 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 #overlay will then use the <body> dimensions and fill the entire page.

来源：https://stackoverflow.com/questions/4648418/css-how-to-get-this-overlay-to-extend-100-with-scrolling

标签

html

css

overlay