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

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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