CSS: Jak uzyskać tę nakładkę, aby w 100% przewinąć?

Oto przykład z omawianym tematem:CSS: Jak uzyskać tę nakładkę, aby w 100% przewinąć?

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

widać jest szara nakładka na całej stronie, ale jeśli przewijać zawartość poniżej początkowej strony obciążonej nie ma nakładka.

Mam div #overlay i wydaje się, że nie zachowuje on 100% wzrostu podczas przewijania, więc próbuję dowiedzieć się, jak to zrobić.

Oto pełna źródło:

<!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>

Źródło

2011-01-10 Shpigford

Dzięki za to! Dla każdego, kto czyta, problem jest naprawiony na powyższym linku. Aby odtworzyć go, użyj Firebug lub podobnego, aby usunąć 'position: fixed;' z identyfikatora overlay :) – RyanM

3yrs później i mam ten sam problem :) +1 dla pytania – Ljubisa

131

position: fixed; na nakładce.

Źródło

2011-01-10 15:36:29 benhowdle89

bez wstydu, proste błędy zajmie mi godziny, aby zobaczyć czasami !! ! – benhowdle89

Należy zauważyć, że ustalone pozycje nie są obsługiwane w IE6. Ale biorąc pod uwagę fakt, że używasz wartości rgba, myślę, że w ogóle nie obchodzi cię IE. : p – Dan

kto to robi? ;) (wszyscy powinniśmy) ha – benhowdle89

Zmień #overlayposition:absolute do position:fixed

Źródło

2011-01-10 15:37:32 Bazzz

Dzieje się tak dlatego, że #overlayposition: absolute jest w stosunku do <html> i stosując to wymiary, które jest tylko wysokość rzutni.

Aby upewnić się, że #overlay używa wymiarów całej strony, można użyć position: relative; na <body> (ale trzeba będzie usunąć min-height: 100% i height: 100% na <body> pierwszy, ponieważ to sprawia, że korzystać rozmiar rzutni). #overlay następnie użyje wymiarów <body> i wypełni całą stronę.

Źródło

2015-10-14 14:09:57 Thom

CSS: Jak uzyskać tę nakładkę, aby w 100% przewinąć?

Odpowiedz

Powiązane problemy