Wysokość elementu, sekcji na wysokość okna przeglądarki [CSS]
Dziś zajmę się bardzo prostym tematem, który jednak czasem sprawia wielu osobą problemy!
Co znajdziesz w tym wpisie
Dopasowanie sekcji strony do wielkości okna przeglądarki
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:
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.
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.
Przykładowe zastosowanie tła wysokości okna przeglądarki
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