Developing.ru

В мобильных версиях chrome и yandex стили ведут себя по разному из-за того что chrome отбирает от высоты экрана устройства 56px под навигационную панель сверху.

А yandex-нет. Он игнорирует навигационную панель и расстягивает блок по всей высоте устройства.
В связи с этим возникла проблема в разработке.

Нужно под яндекс браузер и хром отдельно стили прописать.

Пример проблемы:

В случае с chrome используется следующее правило

.div {
height: calc(100vh - 56px);
}

такое правило растягивает на весь экран устройства в chrome.
*56px - это высота навигационной панели сверху браузера, но оно не подойдет для yandex браузера, т.к. внизу экрана останется пустой пробел высотой в эти 56px.

для yandex браузера, firefox, opera подойдет только такое правило

.div {
height: 100vh;
}

Использование css хаков не помогает
Как решить данную проблему?

Варианты:
1. Использовать min-height 100%
2. Менять высоту динамически, с помощью JavaScript.