Проблема 100vh на мобільному
15.12.2022 | Написав eugenem
Якщо блоку в верстці задана висота 100vh, тобто, він займає 100% висоти в’юпорта, то на мобільному ми отримуємо проблему. А саме ця висота рахується без урахування верхнього бару браузера. В результаті блок вилазить за екран, якщо верхній бар відображається. Як це пофіксити?
На css-tricks-com є гарне рішення. Я його затестив, і воно працює. Робимо наступне:
1. Додаємо скрипт JS:
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit let vh = window.innerHeight * 0.01; // Then we set the value in the --vh custom property to the root of the document document.documentElement.style.setProperty('--vh', `${vh}px`); // We listen to the resize event window.addEventListener('resize', () => { // We execute the same script as before let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }); |
2. Потрібному блоку додаємо стилі:
.my-element { height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); } |
Результатом отримуємо коректну висоту.
Рубрика: Веброзробка
Коментарі читачів статті "Проблема 100vh на мобільному"
Немає коментарів.