I am creating a web page that should exactly fill the screen on a mobile phone. This means that the page will not scroll. If the page is not scrolled, the browser address bar remains on-screen, occupying screen real-estate and conflicting with the design of the page.
I use CSS to set the height of the body to 100% of the height of the window, but height of the window is the height of the mobile screen minus the height of the browser address bar, so even if I succeed in removing the address bar (by zooming the page, scrolling, then returning to the unzoomed size) there is now a gap at the bottom of the screen that is exactly the same height as the now-hidden address bar.
Is there a way to use CSS to set the height of the page to the full height of the screen, so that:
- Scrolling becomes possible
- The address bar can be made to hide
- The page-minus-the-address-bar will fill the screen
?