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

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

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

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

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

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

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

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

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

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

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

Август 11, 2019 г.

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

Читать

И снова переносы в CSS

Ноябрь 30, 2021 г.

Да, вновь тема переносов, т.к. я уже писал небольшую статью, но еще раз возвращаюсь к данной теме с некоторыми новыми подробностями. Итак - разрыв слова, перенос текста на новую строку - рассмотрим, какие директивы даёт нам CSS для управления поведением ...

Читать

 

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

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



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