Cała szerokość strony, czyli o mrocznym widmie viewport width

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 oraz…