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

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

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

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

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

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

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

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

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

Способы прижать HTML элемент к нижнему краю экрана

Сентябрь 14, 2015 г.

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

Читать

Bootstrap extra large - стили для сетки свыше 1600 точек

Апрель 20, 2017 г.

3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно. В то время как на телефонах ...

Читать

CSS высота равна ширине

Август 11, 2019 г.

Ширина и высота контейнера - независимые параметры, но иногда хотелось бы чтобы связь между ними была, к примеру, для сохранения пропорций контейнера при адаптивной верстке. Прямой связи в CSS между width и height нет, и нет возможности задать ...

Читать

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

Июнь 15, 2023 г.

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

Читать
 

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

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



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

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

  1. lionis:

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