seoperin
@seoperin
Full stack web developer. Laravel / Vue

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

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

P.S. я конечно могу ошибаться, но вроде как никогда не видел решения этой проблемы
Ответ написан
Не знаю, актуально или нет, но всё же
.classname {
  height: 130%;
  height: 130vh;
}
Ответ написан
Комментировать
@wendem
актуально это, мне помогло - https://css-tricks.com/the-trick-to-viewport-units...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы