Wysokość elementu, sekcji na wysokość okna przeglądarki [CSS]

Czas czytania: 3 minut

W tym wpisie pokażę wam jak w prosty sposób ustawić wysokość elementu blokowego takiego jak <div> czy <section> na wysokość okna przeglądarki. Czyli na całą widoczną część strony – 100% wysokości.

wysokość ekranu roboczego w przeglądarce internetowej, jak ją uzyskać. Co zrobić by sekcja strony mieściła się na ekranie
wysokość ekranu roboczego w przeglądarce internetowej, jak ją uzyskać. Co zrobić by sekcja strony mieściła się na ekranie

Dopasowanie sekcji strony do wielkości okna przeglądarki

Czyli dopasowywaniem wysokości sekcji (np. <div>, <section>) 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 napisałam w oddzielnym artykule -> Różnice między One Page i Landing Page. 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.

Efekt pełnej wysokości strony można uzyskać na kilka sposobów. A mianowicie trzeba ustawić wysokość kontenera na:

  • 100%,
  • 100vh,
  • 100lvh,
  • 100svh,

Nie ważne na, którą się zdecydujecie by obie zadziałały trzeba odpowiednio przygotować kod witryny internetowej. Tak więc najlepiej będzie jeśli przejdziemy do praktyki.

Przeczytaj -> Jednostki stosowane w CSS i HTML

Wysokość strony z % (procentach)

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, ekranu komputera

Wysokość strony, sekcji z pomocą vh

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

tło na wysokość okna przeglądarki internetowej
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. 50vh

fragment wysokości strony 50vh
fragment wysokości strony

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.

Obecnie od jednostki tej zaczyna się odchodzić na korzyść innych metod. Dlatego też jeśli chcesz stworzyć nowoczesną stronę użyj drugiej metody z wysokością w %.

Pełna wysokość strony z lvh i svh

Obie te jednostki dają nam możliwość rozciągania ekranu na całą wysokość wyświetlacza urządzenia jednak działają nieco inaczej. Przykładowo na urządzeniu mobilnym:

  • lvh spowoduje, że elementy pierwszego ekranu strony będą się wyświetlały jeszcze pod paskiem nawigacyjnym
  • svh z kolei rozciągnie sekcję jedynie do tego paska.

Jest to spowodowane faktem, że jednostki te należą do 2 różnych grup.

  • Large viewport – Jednostki reprezentujące duży widoczny obszar roboczy to np. lvw, lvh, lvi, lvb, lvmin i lvmax.
  • Small viewport – Jednostki reprezentujące mały widoczny obszar to: svw, svh, svi, svb, svmin i svmax.
smal large viue point min

Kod powyższych przykładów może wyglądać następująco.

height: 100lvh; // dla lewego
height: 100svh; // dla prawego

Kiedy używać Large viewport a kiedy Small viewport

Typ jednostkiLarge viewportSmall viewport
mogą zajmować 100% wysokości gdy elementy interfejsu zostaną schowanetak po załadowaniu strony
czy muszą mieścicie się w oknienietak
rozmiar / wartośćstała przez cały czasmoże ulegać zmianie
Czy działa jak 100vhtak – np. dla 100lvhnie bo wysokość nie jest stała

W praktyce wybór stosowanych jednostek zależy od nas i naszych potrzeb. Dokonując wyboru warto dobrze się zastanowić czego potrzebujemy tak by wysokość okna przeglądarki była uzupełniana według naszych potrzeb.

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

Poniżej znajdziecie przykład zastosowania:

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

Koniecznie przeczytaj

Poniższe wpisy pomogą ci lepiej poznać temat i uzupełnić braki w wiedzy