100vh не корректно работает для мобильных устройств

Правильно будет сказать, что свойство не работает так как ожидается. Оказывается, что часть контейнера с установленной высотой 100vh, может быть перекрыта нижней панелью браузера. Разберемся как решается данная проблема.

В интернете можно найти решения использующие js, но мы их здесь рассматривать не будем.

CSS фиксы сводятся к использованию переменной webkit: -webkit-fill-available:

Эта конструкция задаёт высоту равную видимой области на мобильных устройствах. Обычно задаётся следующая комбинация стилей контейнера:

Т.е. мы задаём высоту 100vh, но максимально ограничиваем её значением -webkit-fill-available. Так это работает и на десктоп и на мобиле.

Данный трюк работает на всех браузерах, кроме IE 11 (на Edge уже работает).

Если в контейнере есть вложенные обертки, то им для сохранения высоты контейнера в 100% нужно задать следующие стили:

Написать комментарий

Мало букафф? Читайте есчо !

Убираем подсветку поля при фокусе ввода в Chrome

Май 18, 2018 г.

В браузерах на движке chromium (Chrome, Opera) по умолчанию есть "подсветка" поля, получившего фокус ввода. Смотрим как убрать данный стиль. Давайте ...

Читать

Скользящий блок внутри контейнера, но фиксированный относительно экрана

Июнь 15, 2023 г.

Сложно коротко описать поведение блока, а речь пойдет о sticky позиционировании в css. Невероятно классная штука position: sticky давно уже существует в спецификации, но пока ощутимая доля интернетчиков пользовалось IE, который не поддерживал значение ...

Читать

 

Комментарии к «100vh не корректно работает для мобильных устройств»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Один комментарий в “100vh не корректно работает для мобильных устройств”

  1. lionis:

    Добрый день, большое спасибо с данную статью!