Czy nakładka Div ma CAŁĄ stronę (nie tylko widok)?

Mam więc problem, który wydaje mi się 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 to jest tak trudne do zrobienia ... Próbowałem ustawienie ciała, html wysokości do 100% itp., Ale to nie działa. Oto co mam do tej pory:Czy nakładka Div ma CAŁĄ stronę (nie tylko widok)?

<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 do roztworu w JavaScripcie, jeżeli taki istnieje, ale Wolałbym być po prostu za pomocą kilku prostych CSS.

Źródło

2010-05-17 Polaris878

można odczytać również więcej tutaj: http://stackoverflow.com/questions/1938536/how-to-make-the-height-really-100/1938592# 1938592 –

Czy można to zrobić naprawdę z jQuery? –

181

Widok jest ważny, ale najprawdopodobniej cała witryna pozostanie zaciemniona nawet podczas przewijania. W tym celu należy użyć position:fixed zamiast position:absolute. Naprawiono, że element jest statyczny na ekranie podczas przewijania, co sprawia wrażenie, że całe ciało jest przyciemnione.

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>

Źródło

2010-05-17 19:58:44 Sampson

Mogę się mylić, ale ustalę stałą pracę w IE6 ?! Wiem, że nikt już nie troszczy się o IE6. –

+22

@Marco Nie jestem pewien. Szczerze mówiąc, jeśli wsparcie dla przeglądarki 10-letniej nie jest jawnie wymagane, nie będę już więcej kłopotać :) – Sampson

Więc jak to robicie na urządzeniach mobilnych? http://bradfrostweb.com/blog/mobile/fixed-position/ – incarnate

Przede wszystkim, myślę, że źle co rzutnia jest. Obszar wyświetlania to obszar używany przez przeglądarkę do renderowania stron internetowych i nie można w żaden sposób budować witryn internetowych w celu nadpisania tego obszaru w jakikolwiek sposób.

Po drugie, wydaje się, że powodem, dla którego twój nakładka-div nie pokryje całego widoku jest to, że musisz usunąć wszystkie marginesy na BODY i HTML.

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

* { margin: 0; padding: 0; }

Edit: Właśnie rozumieć swoje pytanie lepiej.Position: fixed;prawdopodobnie zadziała, jak napisał Jonathan Sampson.

Źródło

2010-05-17 20:00:05

Nie należy usuwać paddingu i marginesów z * wszystkiego *. Naprawdę pracochłonne może być odzyskanie wielu elementów, takich jak przyciski i formularze. – Sampson

Moim zdaniem, jest to naprawdę łatwy sposób traktowania wszystkiego bardziej tak samo w różnych przeglądarkach.Dziś może nie być już tak dużo jak przedtem, kiedy dostosowywał się do IE5, ale nadal robię to jako jedną z pierwszych rzeczy, które piszę w arkuszu stylów. –

@Arve Zyskujesz blisko, ale zamiast tego lepiej użyć przetestowanego na czas arkusza resetowania. Sprawdź http://meyerweb.com/eric/tools/css/reset/, aby uzyskać więcej informacji - pokochasz to, zapewniam Cię :) – Sampson

body:before { 
    content: " "; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.5); 
}

Źródło

2012-11-14 15:03:40

Najlepsze możliwe rozwiązanie tam. Wystarczy, że zamienisz "nałożoną" klasę na ciało i zastosujesz stylizację powyżej do ciała z tą klasą. –

Proszę wyjaśnić tę odpowiedź więcej. Nie rozumiem komentarza Światosława. –

-6

Spojrzałem na powyższą odpowiedź Nate'a Barra, która podobała Ci się. Nie wydaje się bardzo różni się od prostsze

html {background-color: grey}

Źródło

2015-06-06 03:36:36

Czy nakładka Div ma CAŁĄ stronę (nie tylko widok)?

Odpowiedz

Powiązane problemy