CSS: Как получить этот оверлей для увеличения на 100% при прокрутке?

Вот пример рассматриваемой проблемы:

http://dev.madebysabotage.com/playground/overlay.html

Вы видите, что на всей странице есть серый оверлей, но если вы прокрутите вниз, содержимое ниже начальной загруженной страницы не будет иметь оверлей.

У меня есть div #overlay и кажется, что он не поддерживает высоту 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 some sweet content</p>
  </section>
  <footer>
    <p>Here my footer</p>
  </footer>
</body>
</html>

Ответ 3

Это происходит потому, что #overlay position: absolute относится к <html> и использует его размеры, что является только высотой видового экрана.

Чтобы убедиться, что #overlay использует размеры всей страницы, вы можете использовать position: relative; в <body> (но вам нужно будет сначала удалить min-height: 100% и height: 100% на <body> потому что это позволяет использовать размер видового экрана). Затем #overlay будет использовать размеры <body> и заполнить всю страницу.

CSS: Как получить этот оверлей для увеличения на 100% при прокрутке?

Ответ 1

Ответ 2

Ответ 3