Высота 100vh на мобильном?

Question

[Евгений Перин]

Ох уж эта адаптивная верстка :)
Делаю блоки высотой 100vh, на компе всё норм, в мобильном тоже всё норм, кроме одного НО!
Блоки получаются высотой во весь экран, но из-за того что в мобильном браузере верхняя плашка (навигация браузера) плавающая, то происходят скачки размера этих блоков. То есть когда загружаю страницу, самый верхний блок (первый экран сайта) идёт высотой 100vh. Но это высота исключает верхнюю плашку браузера, когда чуть чуть прокручиваю страницу, на высоту этой плашки, плашка ушла вверх, и высота блока меняется на эту вразницу, потому что высота экрана как бы стала больше. И происходит скачек. Как быть?) И вообще понятно ли объяснил?

Comments

[pochinka_stula_vl]

100vh - на всю высоту экрана устройства
100% - на всю высоту окна, то есть в мобильном хроме эту секцию не обрежет

Answer 1

[Murat Atila]

Объяснил понятно, с этим ничего не сделать, ведь область экрана увеличилась, соответственно и высота увеличилась, скачёк был, есть и будет.(тоже самое часто можно наблюдать с меню, которое прижато к верху абсолютно и т.д.)

P.S. я конечно могу ошибаться, но вроде как никогда не видел решения этой проблемы

Comments

[Евгений Перин]

на сайте the-village.ru например, когда заходим в новость (на мобильном), там первый экран в высоту экрана, когда прокручиваю ниже на высоту плашки, то высота блока не меняется. Хотя там может совсем не 100vh используется.... А может яваскриптом как то можно придумать без скачков?)

[Murat Atila]

Евгений Перин: Сомневаюсь. Всё таки js не имеет власти над адресной строкой, и выпилить её из приложения или кастомизировать какими то правилась, боюсь нельзя. А на сайте, village, нету фиксированных элементов, из-за этого и нет скачка

[Евгений Перин]

Murat Atila: во втором комменте я написал как в итоге решил проблему)

Answer 2

[Александр Мускатин]

Не знаю, актуально или нет, но всё же

.classname {
  height: 130%;
  height: 130vh;
}

Answer 3

[wendem]

актуально это, мне помогло - https://css-tricks.com/the-trick-to-viewport-units...