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

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

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

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

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

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

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

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

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

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

Переполнение текста (text-overflow)

Сентябрь 3, 2021 г.

Мы рассмотрим здесь как обрезать текст и добавить многоточие средствами CSS. Это еще одна классическая проблема фронт-енда, как не позволить тексту менять геометрию контейнера, если он не влазит целиком. CSS предоставляет специальное свойство для ...

Читать

Анимация свечения (мерцание)

Апрель 18, 2025 г.

Здесь мы разбираем CSS анимацию - мерцание. Это статья из цикла заметок по CSS анимации и эффектам. Эта анимация создаёт эффект мягкого свечения вокруг элемента, будто он излучает свет. Часто используется для привлечения внимания к кнопкам, ...

Читать

 

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

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



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

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

  1. lionis:

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