Как получить высоту вьюпорта за вычетом `sticky bar` у различных мобильных браузеров?

Question

[Влад]

UI сайта, который я пишу, предполагает точный размер высоты видимой части документа, однако практически у всех мобильных браузеров имеется свой стики бар, который изначально находится как бы в `position: static`, а при скроллинге сжимается. Так вот он почему-то учитывается в 100vh. А мне нужно знать его точный размер, чтобы вычесть его из этих `100vh`, типа `calc(100vh - browserBarHeight)`. У каждого браузера он отличается размерами, поэтому видимо необходимо добраться до его размера, либо получить высоту вьюпорта за его вычетом.

Какие тут могут быть варианты решения проблемы?

Comments

[Вадим]

Из моего опыта в 100vh он как раз таки не учитывается(но это не точно), а когда эти браузерные панельки скрываются, то срабатывает событие resize.
Так что можно работать связкой window.innerHeight + on resize

[Andrey Vasilev]

по сути:
100vh = document.documentElement.clientHeight
тогда:

let res = document.documentElement.clientHeight - browserBarHeight

и 100vh - res
Правильно понял?
ну и ивент resize юзаешь

[sinneren]

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

[Влад]

Вадим,
1) учитывается - только что проверил на хроме, файрфоксе и опере.
2) дело в том, что мне не нужно дожидаться ресайза, условие должно быть выполнено уже при стартовой загрузке страницы.

[Вадим]

Vextor-ltd, window.InnerHeight доступен в любое время
а при ресайзе я вам предлагал обновлять значения

[Влад]

sinneren,

Our hack do not work with partial height like height: 90vh or height: calc(100vh - 60px).

у меня не прокатит.. у меня как раз вычисляемый partial height :-(

[Влад]

Вадим,

window.InnerHeight доступен в любое время

Проверил. Получается как на втором рисунке:

Answer 1

[Евгений]

https://github.com/postcss/postcss-100vh-fix