Высота 100vh при отображении адресной строки - Chrome Mobile

Я сталкивался с этой проблемой несколько раз и задавался вопросом, было ли решение этой проблемы. Моя проблема возникает в мобильном приложении Chrome. Там вы можете немного прокрутить вниз, и адресная строка исчезнет. Пока все хорошо, давайте приведем пример:
Контейнеры height устанавливается в 100vh.

Как видите, нижняя часть отрезана.

Когда я прокручиваю вниз, это выглядит так:

Теперь это выглядит хорошо. Очевидно, что Chrome вычисляет высоту адресных строк в высоту области просмотра. Итак, мой вопрос:

Есть ли способ, чтобы он выглядел одинаково с адресной строкой или без нее? Так что контейнер расширяется или как?

Ответ 1

Вы можете исправить проблему с адресной строкой, установив высоту: 100% для html и тега body, а также для разницы между курсом и отступом тела к нулю, а также вы можете управлять прокруткой в главном div для лучшего контроля

Ответ 2

Попробуйте использовать min-height: -webkit-fill-available. Вы также можете добавить его ниже height: 100vh в качестве запасного варианта.

Ответ 3

Надеюсь, этот хак поможет с этим

@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) and @media (max-width: 480px) {
   height: calc(100vh - 56px);
}

Ответ 4

Я нашел хорошее решение...

.page-header {
  @supports (-webkit-appearance:none) {
    .os-android & {
      min-height: calc(100vh - 56px);
    }
  }
}

Взято из здесь