CSS: Wie bekomme ich dieses Overlay um 100% mit Scrollen zu erweitern?

Hier ist ein Beispiel für das Problem in Frage:CSS: Wie bekomme ich dieses Overlay um 100% mit Scrollen zu erweitern?

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

Sie sehen dort eine graue Overlay über die gesamte Seite ist, aber wenn Sie nach unten scrollen, wird der Inhalt unter der ursprünglichen geladenen Seite nicht hat die Überlagerung.

Ich habe eine #overlay div und es scheint, dass es nicht die 100% Höhe während des Scrollens, so versucht, herauszufinden, wie man das abziehen.

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>

Quelle

2011-01-10 Shpigford

Danke dafür! Für jeden anderen Leser ist das Problem über den obigen Link behoben. Um es neu zu erstellen, benutze Firebug o.ä., um 'position: fixed;' aus der Overlay-ID zu entfernen. – RyanM

3 Jahre später und ich habe das gleiche Problem :) +1 für Frage – Ljubisa

131

position: fixed; auf dem Overlay.

Quelle

2011-01-10 15:36:29 benhowdle89

keine Schande, einfache Fehler nehmen mich manchmal stundenlang !! ! – benhowdle89

Beachten Sie, dass feste Positionen in IE6 nicht unterstützt werden. Aber angesichts der Tatsache, dass Sie rgba-Werte verwenden, schätze ich, dass Sie sich überhaupt nicht für IE interessieren. : p – Dan

Wer macht das? ;) (wir sollten alle wirklich) ha – benhowdle89

ändern #overlayposition:absolute zu position:fixed

Quelle

2011-01-10 15:37:32 Bazzz

Dies geschieht, weil die #overlayposition: absolute zum <html> relativ und die Verwendung dieser Dimensionen ist, die nur die Darstellungshöhe.

Um sicherzustellen, dass die #overlay die Dimensionen der gesamten Seite verwendet, Sie position: relative; auf dem <body> verwenden könnte (aber Sie werden die min-height: 100% und height: 100% auf dem <body> zuerst, weil das macht es die Darstellungsgröße verwenden entfernen müssen). Die #overlay wird dann die <body> Dimensionen verwenden und die gesamte Seite ausfüllen.

Quelle

2015-10-14 14:09:57 Thom

CSS: Wie bekomme ich dieses Overlay um 100% mit Scrollen zu erweitern?

Antwort

Verwandte Themen