Который раз сталкиваюсь с такой проблемой: в задаче сказано, что страница должна на мобильном открываться на всю высоту экрана браузера и чтобы при этом отсутствовала полоса прокрутки. Казалось бы, что эту задачу можно легко решить, назначив высоту для страницы 100vh. А не тут-то было. Назначаешь данную высоту – и действительно, открывающаяся страница имеет высоту экрана. Но есть прокрутка. Почему? Потому что на экране присутствует служебная строка, которая не влияет на вычисление высоты экрана средствами css. В результате страница сдвигается вниз на величину этой высоты.
Как решить эту проблемы чисто средствами css, на данный момент ответа не нашел. Поэтому пришлось прибегнуть к помощи javascript. Получалась некая связка джавасрипт и css.
Для начала с помощью джаваскрипт вычисляем высоту текущей области просмотра браузера. Исходя из полученного значения, узнаем, сколько пикселей приходится на 1vh, и записываем это значение в переменную css :
<script>
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
</script>
В результате работы данного срипта к тегу <html&rt; добавится правило вида:
<html style="--vh:8.12px;">
Числовое значение будет зависеть от высоты области просмотра. В данном примере (можно догадаться) высота области просмотра составляет 526 пикселов (или пикселей – кому ка нравится).
Это еще не все. Теперь эту переменную мы можем использовать в вычислениях нужных величин, связанных с высотой области просмотра. Например, для странички, которую мы хотим растянуть или вместить на весь экран браузера по высоте, можем задать высоту для тега body :
body{
height: calc(var(--vh, 1vh) * 100);
}
Если в вашей верстке есть привязка размеров элементов, отступов или размера шрифта к высоте экрана, то к ним тоже можно применить правило, используя данную переменную.
Если нужно каким-то образом пересчитать размеры элементов при изменении положения мобильного телефона, можно воспользоваться функцией, которая будет привязана к событию изменения размера экрана:
(function init100vh(){
function setHeight() {
var vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setHeight();
window.addEventListener('resize', setHeight);
})();
Напоследок несколько замечаний.
1. Скрипт, который вычисляет высоту области просмотра и задает переменную для css, должен располагаться перед закрывающим тегом body. Если его расположить в начале страницы, то вычисления могут оказаться неверными.
2. Переменные css поддерживаются на данный момент не всеми браузерами.