Это ошибка? Как это решить?
Мне кажется, что отсутствие метаинформации viewport вызывает эту проблему. Так как свойство CSS fixed позволяет позиционировать элемент относительно порта просмотра, по умолчанию стандартная высота мобильного устройства берется как эталон viewport (например, пиксель 2 имеет 411x731px) .---
Для того, чтобы что-то подобное не происходило, вы должны предоставить метаинформацию viewport в head, а именно:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ комментарий: Это не вызывает проблемы. Мой локальный индекс. html имеет этот тег.
Я думаю, я нашел причину. Похоже, вы должны установить overflow на auto (по умолчанию visible) для html и body. Он должен работать. Я только что проверил на своем мобильном телефоне (должен был сделать это прежде, чем опубликовать мой ответ).
Оформить заказ на этот пример и дать мне обратную связь, если и как это работает для вас:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<style>
.bot-footer {
background-color: #59e01b;;
color: white;
position: fixed;
left: 0;
bottom: 0;
font-size: 3vw
}
html, body {
overflow: auto;
}
</style>
</head>
<body>
<div id="root">
<hr style=" width: 3000px;"/>
<footer class="bot-footer">Like at least </footer>
</div>
</body>
</html>