Dziś zajmę się bardzo prostym tematem jednak tylko z pozoru. Bo niestety jednak czasem sprawia wielu osobą naprawdę duże problemy!
Co znajdziesz w tym wpisie
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 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, sekcji 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 % (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.
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
- 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ą.