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.
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:
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:
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
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.
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 %.
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:
Jest to spowodowane faktem, że jednostki te należą do 2 różnych grup.
Kod powyższych przykładów może wyglądać następująco.
height: 100lvh; // dla lewego
height: 100svh; // dla prawego| 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.
Poniżej znajdziecie przykład zastosowania:
See the Pen height % by Aura (@Julka85) on CodePen.
Poniższe wpisy pomogą ci lepiej poznać temat i uzupełnić braki w wiedzy
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…