Jak ustawić wysokość sekcji strony równą wysokości okna przeglądarki?

Czas czytania: 2 minut

Dziś zajmę się bardzo prostym tematem, który jednak czasem sprawia wielu osobą problemy!

wysokość okna przeglądarki / ekranu roboczego
wysokość okna przeglądarki / ekranu roboczego

Dopasowanie do wielkości okna

Czyli dopasowywaniem wysokości sekcji naszej strony do okna przeglądarki (ekranu roboczego). Metoda ta jest bardzo często stosowana na różnego typu stronach w szczególności:

  • One Page
  • Landing Page

O tym jakie są różnice między tymi typami stron napiszę kiedy indziej. Myślę, że to dość istotne by móc poprawnie je odróżniać. W tej chwili jednak nie będę specjalnie zgłębiać tego tematu i zajmę się moim efektem.

Wysokość strony z pomocą vh

W dużym uproszczeniu można uznać, że 1vh = 1% wysokości obszaru roboczego ekranu komputera. A jak to wygląda w praktyce:

tło na wysokość okna przeglądarki internetowej

W tym wypadku wysokość ustawiona jest na 100vh

height: 100vh;

Z pomocą jednostki vh możemy ustawiać wysokość ekranu również tylko na część ekranu np.

wysokość tła na pół ekranu
fragment wysokości strony 50vh

Uwaga: zanim zdecydujesz się skorzystać z tej metody pamiętaj, że nie VH nie jest interpretowane poprawnie przez wszystkie przeglądarki. Sprawia również problemy na urządzeniach przenośnych np. smartphonie.

Przy mniejszych rozdzielczościach / szerokościach ekranu należy więc zmienić wysokość np. na 100%;

Wysokość strony z %

Nadanie wysokości stronie z pomocą % jest dożo częściej spotykaną metodą. Dużym plusem tej metody jest jej interpretacja przez przeglądarki. Poprzednia metoda nie działa we wszystkich starszych przeglądarkach.

W metodzie tej niezwykle istotne jest by wysokość 100% ustawić nie tylko na docelowy obiekt, ale także jego rodziców np.

body, html{
height:100%;
}
div{
height:100%;
}

dla sytuacji kiedy

<body>
  <div></div>
</body>

Jeśli pominiemy jakiś element po drodze metoda nie zadziała. 

wysokość całego okna

Przykładowe zastosowanie tła wysokości okna przeglądarki

See the Pen height % by Aura (@Julka85) on CodePen.

https://www.aurainweb.pl/2018/06/rozmiary-wymiary-uzywane-w-css/