Javascript - rozmiar okna

pytanie zadane 20 czerwca 2023 w JavaScript przez MacieKap Bywalec (2,400 p.)

<!DOCTYPE html>
<html lang="PL">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax sscrolling effect</title>
    <style>
        body{
    margin: 0;
    padding: 0;
}
#logo{
    background-image: url(scooter.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;

}
#logo::after{
    content: " ";
    background-color: rgba(0, 0, 0, 0.35);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
#logo2{
    height: 1080px;
    width: 1920px;
}
    </style>
</head>
<body>
    <div id="container">
    <div id="logo">
        <div id="logo2">Scooter</div>
    </div>
    </div>
    <script>
        var w = window.innerWidth;
        var h = windows.innerHeight;

        document.getElementById("container").style.width = w;
        document.getElementById("container").style.height = h;
    </script>
</body>
</html>

Witam,

chciałbym, aby ten skrypt (dół dokumentu) ustawiał #container na te same rozmiary co rozmiar dostępnego miejsca w oknie przeglądarki. Ale niestety nie działa, jest w stanie ktoś pomóc?

Z góry dziękuje za wszystkie odpowiedzi,

2 odpowiedzi

odpowiedź 20 czerwca 2023 przez Comandeer Guru (601,890 p.)

Polecam używać konsoli w przeglądarce. Wówczas dostałbyś informację o błędzie w kodzie – masz windows w zmiennej h zamiast window. Drugi błąd jest związany z niedodawaniem jednostki, nie da się przypisać samej liczby do stylów elementu, musi być jednostka. Musisz zatem dodać do window.innerWidth i window.innerHeight ciąg 'px'.

Aczkolwiek wydaje mi się, że spokojnie możesz tutaj użyć jednostek vw i vh i wgl zrezygnować ze skryptu JS, po prostu ustawiając temu elementowi width na 100vw i height na 100vh w CSS-ie.

komentarz 20 czerwca 2023 przez MacieKap Bywalec (2,400 p.)

Ok, poprawiłem ten skrypt, ale div dalej jest delikatnie za szeroki.

komentarz 20 czerwca 2023 przez infinityhost Użytkownik (780 p.)

Tak, w teorii, bo potem się pojawia scrollbar i to co na początku oczywiste już potem takie nie jest. No i ms edge, gdzi po prawiej stronie pojawił się dodatkowy pasek i window.innerWidth już nie jest widnow.innerWidht.

Po pierwsze zrób tak, dodaj do document.body element DIV.

Potem popatrz na właściwości okna masz na w3schools może 10 parametrów okno, innerWidth,clientWidth, offsetWidth itp. i wyświetl sobie je wszystkie w tym divie.

Potem wyświetl w div te parametry swojego #conainer.

I jeszcze masz w CSS chyba taki parametr wyswietlania typu "flex" "align-content:stretch".

komentarz 20 czerwca 2023 przez Comandeer Guru (601,890 p.)

@MacieKap, jeśli chcesz mieć element na cały ekran, to wystarczy mu ustawić 100vh wysokości, a na szerokość div z automatu przyjmuje 100%. Jeśli nie sięga krawędzi, to prawdopodobnie trzeba usunąć marginesy i paddingi z body → https://codepen.io/Comandeer/pen/gOQMQJE

komentarz 20 czerwca 2023 przez VBService Ekspert (253,480 p.)

@infinityhost,

window.innerWidth już nie jest widnow.innerWidht

window.innerWidth zawsze jest window.innerWidth,

No i ms edge, gdzi po prawiej stronie pojawił się dodatkowy pasek

będąc bardziej precyzyjnym, chodziło chyba Tobie, że wartość się zmieni dla window.innerWidth

odpowiedź 20 czerwca 2023 przez VBService Ekspert (253,480 p.)
edycja 20 czerwca 2023 przez VBService

Do tego co napisał @Comandeer; zmień wartości dla #logo2

      #logo2{
        height: 100%; /* 1080px; */
        width: 100%; /* 1920px; */
      }

dla

     <div id="logo">
       <div id="logo2">Scooter</div>
     </div>

      #logo{        
        ...
        width: 100%;
        height: 100vh;
        position: relative;
      }

[ on-line ]

komentarz 20 czerwca 2023 przez infinityhost Użytkownik (780 p.)

A to nie powinno być 100.00% ?

komentarz 20 czerwca 2023 przez VBService Ekspert (253,480 p.)
edycja 21 czerwca 2023 przez VBService

AFAIK obydwa są prawidłowo interpretowane przez css.

BTW, Zapis z kropką dziesiętną raczej jest stosowany np. m. in. przy wartościach używanych dla animacji css.

[ CSS data type represents a percentage value ]

[ The <percentage> data type consists of a <number> followed by the percentage sign (%) ]

Podobne pytania

+1 głos

3 odpowiedzi 817 wizyt

rozmiar okna przegladarki

pytanie zadane 7 lipca 2020 w HTML i CSS przez lujasjeden Użytkownik (860 p.)

0 głosów

1 odpowiedź 127 wizyt

Przy powiekszaniu okna przeglądarki powiększa się całe menu

pytanie zadane 29 listopada 2021 w HTML i CSS przez TheDarkSide Użytkownik (930 p.)

0 głosów

1 odpowiedź 4,421 wizyt

Jak za pomocą JavaScript napisać bota

pytanie zadane 26 lutego 2017 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)

Javascript - rozmiar okna

Zaloguj lub zarejestruj się, aby skomentować.

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

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci