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.
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ść 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:
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
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.
Kod powyższych przykładów może wyglądać następująco.
height: 100lvh; // dla lewego
height: 100svh; // dla prawegoKiedy używać Large viewport a kiedy Small viewport
| Typ jednostki | Large viewport | Small viewport |
|---|---|---|
| mogą zajmować 100% wysokości | gdy elementy interfejsu zostaną schowane | tak po załadowaniu strony |
| czy muszą mieścicie się w oknie | nie | tak |
| rozmiar / wartość | stała przez cały czas | może ulegać zmianie |
| Czy działa jak 100vh | tak – np. dla 100lvh | nie 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
- Jednostki stosowane na stronach internetowych
- Różnice między landing page a one page
- Umieszczanie grafiki w tle strony internetowej
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.