Search code examples
scrollbaroverflowcss-positionmobile-browser

Fixed header is over scrollbar

I have a fixed header which is hiding the top part of the scrollbar. It's caused by setting overflow: auto on both hmtl and body. However, if I don't do that, it breaks the floating header on mobile browsers (except Firefox).

I'm not sure what to do here, it seems I either have the header over the scrollbar or a broken fixed header on mobile browsers.

Here's an example.

    html, body {
        height: 100%; width: 100%;
        margin: 0;
        overflow: auto;
    }

    header {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 7.5em;
        z-index: 1000;
    }
Solution

  • I removed overflow: auto from body and added user-scalable=no to <meta content='width=device-width,initial-scale=1' name='viewport'>. That does the trick.

    See this answer