Почему это странное пространство начинает появляться в нижней части страницы только на мобильных устройствах? ⇐ CSS

[Anonymous]

Вот минимальный воспроизводимый пример, который я записал, который может продемонстрировать эту проблему.






html {
height: 100%;
background-color: red;
}

body {
display: flex;
flex-direction: column;

margin: 0;
min-width: fit-content;
min-height: 100%;
}

header, footer {
background-color: white;
}

main {
flex: 1;
background-color: gray;
white-space: nowrap;
}




what's up! welcome to my awesome website.


big and looooooooooong text to more easily simulate possible horizontal overflow
more easily simulate possible vertical overflow
more easily simulate possible vertical overflow
more easily simulate possible vertical overflow
more easily simulate possible vertical overflow
more easily simulate possible vertical overflow
more easily simulate possible vertical overflow
more easily simulate possible vertical overflow
more easily simulate possible vertical overflow


pushed down low!



< /code>
Цель состоит в том, чтобы быть заголовком и нижним колонтитулом «полосы» в верхней и нижней части страницы, а также для основного содержания в середине, чтобы заполнить самое вертикальное пространство. В случае, если есть вертикальный или горизонтальный переполнение, должны появиться полосы прокрутки. alt = "переполнение хорошо работает в обычном окне браузера на рабочем столе" src = ">
Но как только я его открываю На мобильном устройстве (или используйте функцию моделирования мобильных устройств в Devtools) что -то странное начинается. Наряду с переполнением горизонтально с помощью прокрутки, когда не хватает горизонтального пространства (как и должно быть), оно также начинает оставлять пустое пространство/зазор HTML внизу после нижней части, как это:

Меньше горизонтального пространства есть, тем больше это пространство/зазор ниже нижней колонны. Я предполагаю, что это как -то связано с метагом Viewport, но в противном случае я оторван. Спасибо. Я ожидаю, что мобильная версия будет вести себя так же, как настольная версия, чтобы быть меньше.

Подробнее здесь: https://stackoverflow.com/questions/793 ... only-on-mo