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

[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>
Цель состоит в том, чтобы быть заголовком и нижним колонтитулом «полосы» в верхней и нижней части страницы, а также для основного содержания в середине, чтобы заполнить самое вертикальное пространство. В случае, если есть вертикальный или горизонтальный переполнение, должны появиться полосы прокрутки. < /p>
Но как только я открываю его на мобильном устройстве (или использую функцию моделирования мобильного устройства в Devtools) что -то странное начинается. Наряду с переполнением горизонтально с помощью прокрутки, когда не хватает горизонтального пространства (как и должно быть), оно также начинает оставлять чистое пространство/промежуток HTML внизу после нижней части нижней части, как это: переполнение также хорошо работает, но странный промежуток в мобильных Просмотр устройства
тем меньше горизонтального пространства, тем больше этого пространства/зазора ниже нижней колонны. Я предполагаю, что это как -то связано с метагом Viewport, но в противном случае я оторван. Спасибо. Я ожидаю, что мобильная версия будет вести себя так же, как настольная версия, чтобы быть меньше.

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