Question

以下是相关问题的示例：

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>

Answer 1

position: fixed;在叠加层上。

Answer 2

将#overlay position:absolute更改为position:fixed

Answer 3

这是因为#overlay position: absolute相对于<html>并且使用了它的尺寸，这只是视口高度。

要确保#overlay使用整页的维度，您可以position: relative;使用<body>（但您需要删除min-height: 100%和{首先在height: 100%上{1}}，因为这会使其使用视口大小）。然后，<body>将使用#overlay尺寸并填充整个页面。

CSS：如何通过滚动将此叠加层扩展100％？

3 个答案: