web-dev-qa-db-de.com

CSS: Wie kann dieses Overlay beim Scrollen um 100% erweitert werden?

Hier ist ein Beispiel für das betreffende Problem:

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

Sie sehen, dass die gesamte Seite grau überlagert ist. Wenn Sie jedoch nach unten scrollen, wird der Inhalt unter der ursprünglich geladenen Seite nicht überlagert.

Ich habe ein #overlay div und es sieht so aus, als würde die Höhe beim Scrollen nicht 100% betragen, also versuchen Sie herauszufinden, wie Sie das schaffen.

Hier ist die vollständige Quelle:

<!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>
htmlcssoverlay
50
Shpigford

position: fixed; auf dem Overlay.

154
benhowdle89

Veränderung #overlayposition:absolute bis position:fixed

8
Bazzz

Dies geschieht, weil #overlayposition: absolute Relativ zum <html> Ist und dessen Abmessungen verwendet werden, bei denen es sich nur um die Höhe des Ansichtsfensters handelt.

Um sicherzustellen, dass der #overlay Die Abmessungen der gesamten Seite verwendet, können Sie position: relative; Für den <body> Verwenden (Sie müssen jedoch den min-height: 100% Und entfernen) height: 100% Zuerst auf dem <body>, Da dadurch die Größe des Ansichtsfensters verwendet wird. Der #overlay Verwendet dann die Abmessungen von <body> Und füllt die gesamte Seite aus.

3
Thom