Zakrywanie całej strony.

pytanie zadane 23 lutego 2022 w HTML i CSS przez Marcin Lorek Początkujący (260 p.)
otwarte ponownie 23 lutego 2022 przez Marcin Lorek

Chcę zakryć całą stronę divem a zakrywa tylko klienta przeglądarki( część wyświetlaną przez monitor), więc pod spodem znajduje się odsłonięta strona. Po stronie JS i HTML wszystko jest ok, nie chce prawidłowo wystylizować stronę jak wspomniałem wcześniej.

#przyciemnienie
{
	position: absolute; 
	top: 0; 
	left: 0; 
	height: 100%; 
	width: 100%;
	background-color: #000;
}

https://github.com/MarcinAL/Zakrywanie-ca-ej-strony./blob/main/js

1 odpowiedź

odpowiedź 23 lutego 2022 przez robert9620 Stary wyjadacz (11,640 p.)

Jeżeli dobrze rozumiem strona się scrolluje i jak dasz diva na pełny ekran to można przeskrolować poza niego? Jednym z rozwiązań mogłoby być:

body {
overflow: hidden;
}

wtedy nie będzie po prostu scrolla.

Inna opcja to ustawić body na position: relative i wtedy wielkość "#przyciemnienie" będzie względem body.

komentarz 23 lutego 2022 przez Marcin Lorek Początkujący (260 p.)

Właściwość overflow: hidden zastosowałem w kodzie javascript i działa (rozwiązanie w komentarzu wyżej), natomiast drugie rozwiązanie z zastosowaniem position:relative nie działa i dalej scrolluje poniżej diva. Dzięki za szybką odpowiedź.

body
{
	margin:0;
	height: 100%;
	position: relative;
}

#przyciemnienie
{
	position: absolute; 
	top: 0; 
	left: 0; 
	height: 100%; 
	width: 100%;
	background-color: #000;
}

komentarz 23 lutego 2022 przez robert9620 Stary wyjadacz (11,640 p.)
edycja 23 lutego 2022 przez robert9620

A czy "#przyciemnienie" jest bezpośrednio w body? Może jest pod innym elementem, który ma position: relative? Wrzuć tak, żeby było bezpośrednio w body:

<body>
    <div id="przyciemnienie"></div>
    ... (reszta kodu strony)
</body>

komentarz 23 lutego 2022 przez Marcin Lorek Początkujący (260 p.)
edycja 23 lutego 2022 przez Marcin Lorek

Div'a dodawałem przy użyciu JS i podpiąłem pod body. Kiedy próbowałem podpiąć bezpośrednio element do body w kodzie html też nie działało.

function zaloguj(ev)
{
    var el0 = document.createElement("div");
    el0.id = "przyciemnienie";
    var body = document.body;
     
    body.appendChild(el0);
     
<!-- Kod poniżej jest pierwszą opcją z zakryciem bez scrolla
   body.style.overflow = "hidden"; -->
}

komentarz 24 lutego 2022 przez Marcin Lorek Początkujący (260 p.)

@robert9620, Zastosowałem małom zmianę i zadziałało. Dzięki :)

<body>
    <div id="przyciemnienie">... (reszta kodu strony)</div>
</body>

Podobne pytania

0 głosów

2 odpowiedzi 161 wizyt

htaccess - zakrywanie linka domeną

pytanie zadane 24 lutego 2016 w Sieci komputerowe, internet przez yato94 Nowicjusz (140 p.)

0 głosów

1 odpowiedź 238 wizyt

Mam kilka pytań do tyczących odwzorowania całej strony bki.org.pl w Wordpress

pytanie zadane 11 lipca 2019 w HTML i CSS przez Bartosz Pawlak Początkujący (370 p.)

0 głosów

2 odpowiedzi 489 wizyt

Wyłączenie scrolla dla diva ale włączenie dla całej strony

pytanie zadane 21 października 2018 w HTML i CSS przez DinapeS Początkujący (350 p.)

Zakrywanie całej strony.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci