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

Question

[Роман Татаринов]

Суть проблемы, что мобильный хром рендерит высоту 100vh, учитывая высоту навигационной панели браузера. Естественно получается, что любая картинка, слайдер и т.д., которые имеют высоту 100vh получается обрезанными. Я гуглил, и ничего не нагуглил.. Как решить данную проблему?

Comments

[pochinka_stula_vl]

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

Answer 1

[evtuhovdo]

Вот супер решение https://css-tricks.com/the-trick-to-viewport-units...

Comments

[kzncvd]

хорош)

[Александр Рыбаков]

От души

[Дмитрий Петров]

при масштабировании обрезает контент, так что далеко не "супер" =(

[Даная Давыденко]

большое спасибо!

[Алексей]

Дмитрий Петров, очистите весь хлам что до этого писали, все ограничения по высоте, и будет норм

Answer 2

[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' }));

Comments

[eeeMan]

ничего не дало

Answer 3

[Конан Варвар]

Решить можно только вычитанием высоты навигационной панели от высоты 100vh.

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

Метод не 100%-ый, т.к. высота навигации у разных устройств может отличаться, но не кардинально. Других решений лично я не нашел :)

Comments

[Роман Татаринов]

Спасибо, но на той же мозиле мобильной проблем не обнаружено. Получается, если я дам минус 60, то получу проблемы в других браузерах. Еще ios посмотреть бы

Answer 4

[Николай]

Кому-то пригодится решение проблемы 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);
    }
}

Comments

[Дмитрий Давыдов]

Работает, спасибо

Answer 5

[Максим Тимофеев]

мобильный хром рендерит высоту 100vh, учитывая высоту навигационной панели браузера

не только хром

Высота 100vh на мобильном?
Проблемы с height: 100vh на мобильном. Как решить?
Почему криво работает height: 100vh для мобильных браузеров Chrome, Yandex, Mozilla?

Comments

[Роман Татаринов]

Проблема не в дерганье верстки. Проблема в том, что хром изначально считает 100vh с учетом своей панели. И получается, что у меня элемент полностью не отображается.

[Максим Тимофеев]

Роман Татаринов: Там по ссылкам описано из-за чего это. Решить не получится.