Как решить проблему с высотой страницы в мобильном браузере через Custom Properties CSS

Я думаю, все мы сталкиваемся с такой проблемой, при которой высота страницы равная 100vh в мобильном браузере ведет себя не так как мы ожидаем. А именно, появление вертикального скрола, которого быть не должно.

Ниже приведен пример проблемы.

В браузере скрола нет, но на симуляторе iPhone он появился.

А все потому, что cпецификация о том, как должны рассчитываться единицы просмотра (viewport units) довольно расплывчата. Что касается мобильных устройств, нас часто интересует высота по вертикали, поэтому давайте посмотрим конкретно на высоту области просмотра (vh):

vh unit
Равно 1% высоты исходного содержащего блока.

Так что да, нет четкого руководства, когда дело доходит до обработки устройств и браузеров.

vh изначально рассчитывался текущим окном просмотра вашего браузера. Если вы открыли браузер и начали загружать сайт, то 1vh был равен 1% от высоты вашего экрана, минус интерфейс браузера.

Но! Если вы начнете скролить страницу, то это уже другая история. Как только вы прокрутите часть интерфейса браузера, например адресную строку, значение vh будет обновлено, и в результате получился скачок. Кажется, что это не так важно… Но не для заказчика.

Что же делать?!

Решить проблемы можно разными способами. Но я хочу предложить вам один, наиболее оптимальный, на мой взгляд, способ, который вмещается в несколько строк кода.

И так, для начала, в style.css указывается для body — min-height: 100vh; если вы еще не сделали этого.

style.css

body {
    min-height: 100vh;
}

Далее, в основном js файле создадим const vh и присвоим значение window.innerHeight / 100. Сейчас vh присвоено значение 1-го процента window.innerHeight.

main.js

const vh = window.innerHeight / 100;

Теперь, ниже, в document.documentElement.style.setProperty введем Custom Properties vh, равную константе vh в пикселях

main.js

const vh = window.innerHeight / 100;
document.documentElement.style.setProperty('--vh', `${vh}px`);

На данном этапе, эта переменная доступна в CSS.

Вернемся в style.css и добавим следующий стиль

style.css

body {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    /* остальные стили  */
}

Что мы сейчас сделали?! Мы рассчитали значение для min-height через функции calc.

Первым аргументом функции является имя настраиваемого свойства, которое нужно заменить. Тот самый vh, который мы задали в main.js. Необязательный второй аргумент функции, который служит в качестве запасного значения. Если Custom Properties, на которое ссылается первый аргумент, недопустимо, функция использует второе значение.
И умножили эту величину на 100.

ОБРАТИТЕ ВНИМАНИЕ, min-height: 100vh; так же остался для браузеров, которые не поддерживают Custom Properties.

На этом ВСЁ! Магия работает!

Источник https://css-tricks.com/the-trick-to-viewport-units-on-mobile/