Jednostki CSS - Jaka jest różnica między vh / vw a%?

138

Właśnie dowiedziałem się o nowej i niecodziennej jednostce CSS. vhivw zmierz odpowiednio procent wysokości i szerokości rzutni.

Spojrzałem na to pytanie z Stack Overflow, ale sprawiło, że jednostki wyglądały jeszcze bardziej podobnie.

Jak działa jednostka vw i vh

Odpowiedź konkretnie mówi

vw i vh to odpowiednio procent szerokości i wysokości okna: 100vw to 100% szerokości, 80vw to 80% itd.

Wydaje się, że jest to dokładnie to samo, co %jednostka, która jest bardziej powszechna.

W Narzędziach dla programistów próbowałem zmienić wartości z vw / vh na% i viceversa i otrzymałem ten sam wynik.

Czy jest między nimi różnica? Jeśli nie, dlaczego wprowadzono te nowe jednostki CSS3?

css viewport-units Richarda Hamiltona
źródło
7
To, co robi vw / vh, usuwa zależność od dowolnego elementu nadrzędnego i umożliwia ustalanie rozmiaru w oparciu o rozmiar widoku.
Naklejki
2
Kolego czytelniku, odpowiedź IanC może uratować twój dzień, koniecznie sprawdź ją.
Skippy le Grand Gourou

Odpowiedzi:

167

100%może mieć dowolną 100%wysokość. Na przykład, jeśli mam rodzica div, który jest 1000pxwysoki, a dziecko div, które jest na 100%wysokości, to dziecko divmoże teoretycznie być znacznie wyższy niż wysokość rzutni lub znacznie mniejszą niż wysokość rzutni, mimo że divjest ustawiony na 100%wysokość .

Jeśli zamiast tego ustawię to dziecko divna 100vh, to wypełni tylko 100%wysokość widocznego obszaru , a niekoniecznie rodzica div.

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}
<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>
Rozwiń fragment

Josh Beam
źródło
Miałem pasek boczny, który był zagnieżdżony w "wierszu" bootstrapu i nie byłem w stanie ustawić go na pełny rozmiar strony nawet po ustawieniu wysokości: 100%. To, co działało dla mnie, to 100vh
raghav710
27

Wiem, że pytanie jest bardzo stare, a @Josh Beam odniósł się do największej różnicy, ale jest jeszcze jedna:

Załóżmy, że masz <div>bezpośrednie dziecko <body>, którego chcesz, aby wypełniło całą rzutnię, więc używasz width: 100vw; height: 100vh;. Wszystko działa tak samo, jak width: 100%; height: 100vh;dopóki nie dodasz więcej treści i nie pojawi się pionowy pasek przewijania. Ponieważ vwkonto paska przewijania jako części widoku width: 100vw;będzie nieco większe niżwidth: 100%; . Ta niewielka różnica kończy się dodaniem poziomego paska przewijania (wymaganego, aby użytkownik zobaczył tę niewielką dodatkową szerokość), a w konsekwencji wysokość również byłaby nieco inna w obu przypadkach.

Należy to wziąć pod uwagę przy podejmowaniu decyzji, którego użyć, nawet jeśli rozmiar elementu nadrzędnego jest taki sam jak rozmiar okna dokumentu.

Przykład:

Używając width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}
<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>
Rozwiń fragment

Używając width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}
<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>
Rozwiń fragment

IanC
źródło
2
CSS body { overflow: hidden }spowoduje, że paski przewijania nie będą wyświetlane.
Dave F
2

Dziękujemy za odpowiedź i przykładowy kod @IanC. Bardzo mi to pomogło. Wyjaśnienie: wydaje mi się, że pisząc „pasek boczny”, miałeś na myśli „pasek przewijania”.

Oto kilka powiązanych dyskusji na temat jednostek rzutni liczących paski przewijania, które również okazały się pomocne:

Specyfikacja W3C dla jednostek vw, vh, vmin, vmax („procentowe długości widocznego obszaru”) mówi, że „zakłada się, że jakiekolwiek paski przewijania nie istnieją”.

Wygląda na to, że Firefox odejmuje szerokość paska przewijania od 100 vw, jak komentuje @ Nolonar w sekcji Różnica między szerokością: 100% a szerokością: 100 vw? zauważa, powołując się na „Can I Use”.

Czy mogę użyć , być może w sprzeczności ze specyfikacją (?), Mówi, że wszystkie przeglądarki inne niż Firefox obecnie „niepoprawnie” traktują 100vw jako całą szerokość strony, łącznie z pionowym paskiem przewijania.

Slack Undertow
źródło
1

jednostki vw (szerokość widoku) i vh (wysokość widoku) są powiązane z rozmiarem portu widoku, gdzie 100vw lub vh to 100% szerokości / wysokości okna widoku.

Na przykład, jeśli port widoku ma szerokość 1600 pikseli i określisz coś jako 2vw, będzie to odpowiednik 2% szerokości portu widoku lub 32 pikseli.

Jednostka% jest zawsze oparta na szerokości elementu nadrzędnego bieżącego elementu


źródło
0

Jest różnica, która niekoniecznie została podniesiona. 100vw obejmuje szerokość paska przewijania, podczas gdy 100% go nie obejmuje. To niewielka różnica, ale ważna przy projektowaniu.


źródło
1
Odpowiedź IanC tak. „Ponieważ vw odpowiada za pasek przewijania jako część widoku, width: 100vw; będzie nieco większa niż width: 100% ;.”
j08691