romich
@romich
Frontend разработчик

Как подружить height 100vh и chrome mobile?

Суть проблемы, что мобильный хром рендерит высоту 100vh, учитывая высоту навигационной панели браузера. Естественно получается, что любая картинка, слайдер и т.д., которые имеют высоту 100vh получается обрезанными. Я гуглил, и ничего не нагуглил.. Как решить данную проблему?
  • Вопрос задан
  • 30993 просмотра
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 4
evorios
@evorios
Для себя я решил эту проблему таким образом:

body {
  margin: 0;
  overflow: hidden;
}

body > .scroll-box {
    position: relative;
    left: 0;
    right: 0;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
}

Таким образом блокируется прокрутка страницы, следовательно навигационная панель будет видна всегда. А также 1vh будет постоянным. Прокрутка же появляется, если внутри контейнера .scroll-box содержимое не помещается по вертикали. Прокрутка контейнера никак не повлияет на размеры body. Все лайтбоксы, модальные окна и выдвигающиеся меню помещаются в body для того, чтобы появление прокрутки никак не влияло на верстку этих окон.
PS. Для блокировки паразитной прокрутки основного контейнера во время прокрутки модального окна я добавил в JS:
$modal.on('show', () => $scrollBox.css({ 'pointer-events': 'none' }));
$modal.on('hide', () => $scrollBox.css({ 'pointer-events': 'auto' }));
Ответ написан
JaredWinter
@JaredWinter
Помог? - Отметь решением.
Решить можно только вычитанием высоты навигационной панели от высоты 100vh.

height: calc(100vh - 60px); 60px - /*примерная высота панели навигации, точно посмотрите сами*/


Метод не 100%-ый, т.к. высота навигации у разных устройств может отличаться, но не кардинально. Других решений лично я не нашел :)
Ответ написан
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
kolian89
@kolian89
Frontend
Кому-то пригодится решение проблемы height 100vh
const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', '${window.innerHeight}px')
}
window.addEventListener('resize', appHeight)
appHeight()


:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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