Проблемы с height: 100vh на мобильном. Как решить?

Question

[irvdev]

Всем привет!
Использовал height: 100vh уже давно. Но на мобильных есть некоторая проблема.
Если листать верстку вниз то в мобильном браузере скрывается адресная строка. В следствии чего высота экрана увеличивается на несколько пикселей. Из за этого блок с height: 100vh увеличивается на эти пиксели. И получается некоторое дерганье верстки.
А если начать листать вверх, то адресная строка снова появляется и и все обратно передвигается.

Очень не хочется такую верстку в продакшн отдавать.

Может кто в курсе как такое решить? Спасибо.

Answer 1

[artem_music]

Еще есть нюанс, что в айпэде 100% высоты - это высота до панели вкладок, а 100vh - это высота с учетом пространства под ними :)

Один вариант - делать общий враппер с 100% высоты и от этого исходить уже, по крайней мере я так решал эту проблему

Comments

[irvdev]

Не очень понял про враппер(

[irvdev]

т.е. вкладывать всю верстку в какой то контейнер и делать этот контейнер height 100%?

[artem_music]

Решение - не использовать vh на мобильных. Да, оборачивать в контейнер 100% height

[jqweryjson]

Тоже отказался от 100vh на мобилках, в мобильном сафари куча проблем (прыгает контент). Html, Body даю position: relative и height: 100%. И всем блокам которые должны быть на высоту экрана либо height 100% либо min-height 100%, если внутри этого блока будет скролищийся контент. Пока полет нормальный

[eeeMan]

jqweryjson, тогда снизу появляется белая полоса по высоте верхней панели в конце прокрутки

[jqweryjson]

eeeMan, старая проблема, гугли что то вроде этого https://forums.macrumors.com/threads/is-this-a-mob...