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

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

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

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

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

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

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

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

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

Подчеркиваем текст или бек-граунд для текста

Апрель 4, 2023 г.

VS Задача: eсть текст, хочется не просто подчеркнуть (text-decoration: underline), а сделать это красиво. Вместо зеленой полоски, смотрящейся ...

Читать

Текст style CSS

Март 31, 2016 г.

Если вы решили разобраться как устроены документы в Интернет, тогда сразу после знакомства с гипертекстовой разметкой (HTML), вам нужно освоить каскадные ...

Читать

Как запретить растягивание textarea

Февраль 27, 2017 г.

Тэг TextArea - незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый ...

Читать

Выравнивание блока HTML (вертикально и горизонтально)

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

Центровка элемента - одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой ...

Читать
 

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

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



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

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

  1. lionis:

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