How to do CSS positioning that shows the whole thing on one page without the user having to scroll down?

I'm coding the design of my web app. I'd like the whole thing to show on one page without the user having to scroll down. The design is simple and loans itself to that, I just need to work out the coding.

I've played with %, vh, and vmin. It looks like a mess, particularly on phones and tablets where it shrinks tiny when the screen gets small for the keyboard. But even on regular desktop it's not great.


I haven't done this in a while but in the past I've had success with getting the window.innerWidth and innerHeight with JavaScript (on page load) and setting it to the <body> element as width and height. Then add overflow:hidden and presto.

Can you share a screenshot of the UI you're trying to build?