Как сделать так, чтобы мобильная панель не блокировала нижнюю часть страницы? ⇐ CSS

[Гость]

Я попробовал все. Тело не должно прокручиваться, поскольку у меня возникают проблемы с чрезмерной прокруткой в ​​Safari iOS и веб-приложениях Safari (сохранение на главном экране), поэтому вместо этого основной элемент div "

Код: Выделить всё

#content

", весь контент имеет прокрутку при переполнении.Проблема заключается в том, что для параметра #content установлено значение 100vh. >, мобильная панель, закрывает нижнюю часть контента. По данным Google, это обычное явление, и я видел много решений, но главное, что сработало, — это установка высоты: -webkit-fill-available; , но, к сожалению, это не позволяет #content прокручиваться в Chrome Windows.
main.css (прокрутка не работает в Chrome Windows)

Код: Выделить всё

body, html {
padding: 0;
margin: 0;
color: white;
background-color: black;
overflow: hidden;
}

body {
position: fixed;
}

#content {
/* height: 100vh;    Scrollbar present (good) on Safari iOS, Chrome iOS, Chrome Windows, but
bottom of page blocked by browser menu bar on Safari iOS and Chrome iOS (bad) */
height: -webkit-fill-available;  /* Scrollbar present on Safari iOS, Chrome iOS (good), scrollbar
present but no actual bar to scroll down present
on Chrome Windows, can't scroll down (very bad), bottom of page
not blocked by browser menu bar on Safari iOS, Chrome iOS (good) */
width: 100vw;
overflow-y: scroll;
}

index.html

Код: Выделить всё

React App

[*]


You need to enable JavaScript to run this app.


START
3
2
1
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
1
2
3
END
[/b]



// Stops overscrolling on "saved to home page" webapps
window.addEventListener("scroll", (e) => {
e.preventDefault();
window.scrollTo(0, 0);
});

Возможно, это само собой разумеется, но это не настоящая страница, а то, как она будет создана с помощью React.
Извините, если я этого не сделал. не предоставили достаточно подробностей, скажите, если вам нужна какая-либо информация — я ее предоставлю; Я в замешательстве, мне 15 лет, и я уже несколько дней пытаюсь сделать эту страницу такой, какой хочу.
Изображения и видео для show

• Chrome Windows, высота: 100vh; (желаемое поведение, возможность прокрутки)
• Chrome Windows, высота: -webkit-fill-available; (нежелательное поведение, невозможно прокручивать)
  < /li>
  Safari iOS, высота: 100vh; (нежелательное поведение, нижняя часть страницы заблокирована строкой меню Safari)
  Safari iOS, высота: -webkit-fill-available; (желаемое поведение, нижняя часть страницы не блокируется строкой меню Safari)

1 и 4 — это то, чего я хочу достичь.
Огромное спасибо, если вы можете мне помочь

Подробнее здесь: https://stackoverflow.com/questions/662 ... of-my-page