W wielu sytuacjach chcemy, aby nasz element zajmował całą szerokość okna przeglądarki. Zewnętrzna struktura strony, tło czy pewne komponenty nadrzędne, często tyle miejsca potrzebują. Aby ustawić odpowiednią szerokość należy nadać wartość width w CSSie. Można to zrobić za pomocą procentów (jeżeli komponent nadrzędny nie ogranicza szerokości) lub za pomocą vw (viewport width), który dostosowuje rozmiar do szerokości obszaru roboczego przeglądarki.
Czy wykorzystanie obu sposobów jest identyczne? W pewnym stopniu działają podobnie, ale jest między nimi ogromna różnica, która może spowodować, że strona częściowo się rozjedzie. Szerokość viewport (vw) wlicza do siebie jeszcze pionowy pasek przewijanie, jeżeli jest on na stronie.
Przykład poniżej przedstawi problem.
Mamy taki wycinek kodu HTML
<body> <div id="container"/> </body>
oraz plik CSS:
body {
margin:0;
}
#container {
width:100vw;
height:200px;
background-color: aqua;
}
Kod działa tak jak się spodziewamy, nasz kontener ma szerokość całego okna, a wysokość jest ustalona od górnie na 200px.
Strona jest responsywna, jednak tylko do czasu. Jeżeli zmniejszymy stronę tak, aby wysokość przeglądarki była mniejsza niż 200px, wtedy oczywiście pojawi się pionowy scroll bar, bo mamy więcej contentu, niż jesteśmy w stanie wyświetlić. Ale równocześnie z pojawieniem się paska po prawo naszym oczom ukazuje się poziomy scroll bar i stronę można przesuwać na boki. Przecież to nie tak miało działać, chcemy mieć zawsze 100% szerokości, ani milimetra mniej, czy więcej!
Wyjaśnienie
Na górze pisałem już, że vw odwołuje się do obszaru roboczego przeglądarki (ang. viewporu). W jego skład wchodzi to co możemy nazwać zawartością strony, ale też dodatkowo pasek przewijania. Skoro ustaliliśmy szerokość na 100vw (cały rozmiar poziomy okna) nasz element ma szerokość spodziewanego obszaru plus szerokość paska przewijania, więc się nie mieści, jest o te kilka mm za duży. Jakby paska nie było miałby idealną długość.
Jak to rozwiązać? Czy wpisujemy do width 99vw, czy może 98vw? Nic z tych rzeczy. Możemy skorzystać z dobrego i starego sposobu określania szerokości poprzez procenty. Wstawienie 100% do width usunie niepożądany efekt, a strona nadal będzie responsywna. O tak:
body {
margin:0;
}
#container {
width:100%;
height:200px;
background-color: aqua;
}
To było aż takie proste. Chęć użycia vw w tym przypadku może być podyktowana tym, że viewporty są nowszym rozwiązaniem i programista chce podążać za technologiczną modą i wpada w pułapki.
Oczywiście istnieje możliwość zrobienia tego na vw, ale dodaje to tylko niepotrzebnego kodu. Można np. ustalić maksymalną szerokość, albo ukryć pasek przewijania za pomocą:
overflow-x: hidden;
