css – Find out how to stop content material from hiding beneath the iOS Safari UI

I am making an attempt to create a single web page software for the net and thus far it has been going nicely.
Sadly, when testing it on an iPhone I noticed that a part of my web site’s contents are hidden beneath the navigation bar of the browser (Safari). Usually, when scrolling down on an internet site that UI ingredient disappears and makes approach for the content material beneath it to point out correctly and use the display screen house effectively, however since my website has scrolling disabled (since I am making an attempt to make a single display screen UI) a part of it ends down there.

I’ve seen this solely impacts Safari, and my app works completely on different browsers, even on cell.

To this point, to resolve this difficulty I’ve tried to make use of atmosphere variables on CSS like this:
top: calc(100vh - env(safe-area-inset-bottom))

But it surely did not appear to make any distinction.
So what I am asking for is: is there any approach to stop this from occurring, maybe loading the web site on fullscreen already hiding the browser’s UI?

For context, right here is the issue:

Present state

The a part of the web page that will get hidden (enabled scrolling)

What I need to accomplish

(Additionally, I’ve seen {that a} Wordle clone I frequently play (time period.ooo) has managed to drag off what I wished to do, so there’s obtained to be a approach however I have not figured it out by analyzing their CSS ‘-‘)