Как пофиксить 100vh в safari ios?

Question

[Nimbus1996]

Ребят, как пофиксить 100vh в safari а iphone? Мне нужно верхнюю секцию на странице растянуть на всю высоту видимой области браузера.
Нашел только одно решение более менее подходящее:

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

min-height: calc(var(--vh, 1vh) * 100);

Оно вроде как работает, но если перейти с обычной страницы на ту, в которой главная секция должна быть на весь экран, то не правильно высчитывается высота и все улетает в низ. Если обновить эту страницу, то все пересчитается и встанет как надо.

Comments

[sinneren]

https://dev.to/maciejtrzcinski/100vh-problem-with-...

Answer 1

[Николай Домбровский]

@supports (-webkit-touch-callout: none) {
  .h-screen {
    height: -webkit-fill-available;
  }
}

Answer 2

[Даниил Попов]

Через размеры в процентах

html,
body {
  height: 100%;
}

Вот пример: https://jsfiddle.net/groog/o7428ged/18/

Comments

[Nimbus1996]

нижняя панель в браузере закроет часть контента

[sinneren]

height: -webkit-fill-available;

[Даниил Попов]

Nimbus1996,

Скрин с мобильной сафари

ссылка на тестовую страницу

Попробуйте сами, вдруг я ошибаюсь

Answer 3

[Игорь]

Проблема снова актуальна, в IOS15 не происходит пересчет window.innerHeight при открытии клавиатуры, и тем более смены клавы на эмодзи например, кто знает новые хаки?

Answer 4

[Иван Ерохин]

Одно из лучших решений:
JS:

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

CSS:

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

.block {
    height: 100vh;
    height: var(--app-height);
}