cssiphoneheightviewport-units

Fixing 100vh Menu Overlap with iPhone Top Bar

I'm facing a problem where a green background color appears behind a menu that's supposed to be entirely red. The menu is designed to fill the full screen height (100vh), but on iPhone, the top bar causes it to not fully extend to the top of the screen. Is there a way to fix this?

Here is my css for menu

    background: red;
    position: fixed;
    z-index: 9;
    top: 0;
    left: -100vw;
    width: 100vw;
    max-width: 100%;
    height: 100vh;

I've attached an image for reference. It's just for illustration purposes. Cheers!

enter image description here

Solution

  • On an iPhone, the area behind the status bar takes on the body background colour, but it’s not really part of the body itself. The first element of the page appears below the status bar; even the top margin of the body appears below the status bar. 100vh does not include the status bar.

    If you want the status bar background to be a colour other than your body background you can use the theme-color meta tag:

    <meta name="theme-color" content="red" />