Utworzyć nakładkę Div na CAŁĄ stronę (a nie tylko widok)?

97

Mam więc problem, który moim zdaniem jest dość powszechny, ale nie znalazłem jeszcze dobrego rozwiązania. Chcę, aby nakładka div obejmowała CAŁĄ stronę ... NIE tylko widok. Nie rozumiem, dlaczego jest to takie trudne ... Próbowałem ustawić treść, wysokość html na 100% itp., Ale to nie działa. Oto, co mam do tej pory:

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

Byłbym również otwarty na rozwiązanie w JavaScript, gdyby takie istniało, ale wolałbym po prostu użyć prostego CSS.

html css Polaris878
źródło
Więcej można przeczytać tutaj: stackoverflow.com/questions/1938536/…
Marco Demaio
Czy można to zrobić naprawdę za pomocą jQuery?
William Entriken

Odpowiedzi:

228

Liczy się tylko widoczny obszar, ale prawdopodobnie chcesz, aby cała witryna pozostawała zaciemniona nawet podczas przewijania. W tym celu chcesz użyć position:fixedzamiast position:absolute. Naprawiono utrzymuje element statyczny na ekranie podczas przewijania, sprawiając wrażenie, że całe ciało jest zaciemnione.

Przykład: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>
Sampson
źródło
3
Mogę się mylić, ale czy pozycjonowanie stałej pracy w IE6 ?! Wiem, że prawdopodobnie nikogo już nie obchodzi IE6.
Marco Demaio
29
@Marco Not sure. Szczerze mówiąc, jeśli wsparcie dla przeglądarki w wieku 10 lat nie jest wyraźnie wymagane, nie będę się więcej przejmować :)
Sampson
5
Jak więc robicie to na urządzeniach mobilnych? bradfrostweb.com/blog/mobile/fixed-position
BorisOkunskiy
3
+1 dzięki! Rozszerzyłem Twój przykład, dodając wyskakujące okienko nad nakładką: jsbin.com/okabo3/740
kol
Problem, który mam z tym (który jest używany przez wiele wtyczek) polega na tym, że kliknięcie <select>elementu w iOS przesuwa cały obszar roboczy i zasadniczo wszystko psuje. naprawione elementy się poruszają, rzeczy, które nie powinny się przewijać itp.
billynoah
16 
body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
Nate Barr
źródło
2
Najlepsze możliwe rozwiązanie. Po prostu przełączasz klasę „overlayed” na body i stosujesz powyższy styl do body z tą className.
Światosław Zalishchuk
3
Proszę wyjaśnić tę odpowiedź bardziej. Nie rozumiem komentarza Światosława.
Lonnie Best
1

Po pierwsze, myślę, że źle zrozumiałeś, czym jest widoczny obszar. Rzutnia to obszar, którego przeglądarka używa do renderowania stron internetowych i nie możesz w żaden sposób budować swoich witryn internetowych, aby w jakikolwiek sposób zastąpić ten obszar.

Po drugie, wydaje się, że powodem, dla którego Twój overlay-div nie pokryje całego widocznego obszaru, jest to, że musisz usunąć wszystkie marginesy z BODY i HTML.

Spróbuj dodać to na górze arkusza stylów - resetuje wszystkie marginesy i wypełnienia wszystkich elementów. Ułatwia dalszy rozwój:

* { margin: 0; padding: 0; }

Edycja: po prostu lepiej zrozumiałem twoje pytanie. Position: fixed; prawdopodobnie zadziała, jak napisał Jonathan Sampson.

Arve Systad
źródło
1
Nie powinieneś usuwać dopełnienia i marginesów ze wszystkiego . Przywrócenie ich z powrotem dla wielu elementów, takich jak przyciski i dane wejściowe formularzy, może być naprawdę pracochłonne.
Sampson
1
Moim zdaniem jest to naprawdę łatwy sposób na traktowanie wszystkiego tak samo w różnych przeglądarkach. Dziś może nie mieć tak dużego zastosowania, jak dawniej podczas adaptacji do IE5, ale nadal robię to jako jedną z pierwszych rzeczy, które piszę w arkuszu stylów.
Arve Systad
3
@Arve To sprawia, że ​​jesteś blisko, ale zamiast tego lepiej jest użyć sprawdzonego w czasie arkusza resetowania. Sprawdź meyerweb.com/eric/tools/css/reset, aby uzyskać więcej informacji - zapewniam Cię, że Ci się spodoba :)
Sampson
Widziałem to i po prostu uważam, że jest za duży :)
Arve Systad
1
@Arve Resetowanie nie jest tak duże - spróbuj całkowicie zregenerować się z, *{}a zobaczysz o wiele więcej :)
Sampson
0

Miałem sporo problemów, ponieważ nie chciałem NAPRAWIĆ nakładki na miejscu, ponieważ chciałem, aby informacje wewnątrz nakładki można było przewijać po tekście. Użyłem:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

Oczywiście element div w środku potrzebuje trochę treści i prawdopodobnie przezroczystego szarego tła, ale jestem pewien, że rozumiesz sedno!

Benjamin Vaughan
źródło
-6

Spojrzałem na odpowiedź Nate'a Barra powyżej, która wydawała się ci się podobać. Nie wydaje się to zbytnio różnić od prostszego

html {background-color: grey}
Justin Munce
źródło