The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed Header that isn’t overlapped by scrollbar?

  • This topic is empty.
Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
  • #240227

    I tried not using overflow:hidden over the html tag and adding a wrapper inside it, wrapping all the content, the putting overflow:hidden inside this new tag, and now works for Chrome mobile at least.

    Here is an example

    On CodePen it’s not working because it’s not full view exactly.


    Fixed header or footer not overlapped by scrollbar is only important in Cordova apps and in Desktop browsers because it looks logical and beautiful. If you set it in a mobile browser, you break its “address bar auto hide” feature and prevent “pull to refresh” in mobile Chrome.

    I found how to prevent window scrolling on iOS and only allow scrolling of the overflow-y: scroll element. See my answer on with very robust way.

    So, the complete solution is to use platform detection and implement:

    — Full page scrolling (ignore the fact that header is overlapped by scrollbar) on mobile browsers and Cordova on Android 4.3 and below (if you don’t need to support those, implement full page scrolling only for mobile browsers).

    overflow-y: scroll, -webkit-overflow-scrolling: touch and JavaScript (see my snippet on Stackoverflow) to prevent window scroll in Cordova iOS.

    overflow-y: auto on Desktop and Cordova for Android 4.4+.

    The snippet with code for iOS is here (without platform detection):


    I’ve worked out a simple solution. We don’t even need position:fixed.
    See on jsfiddle

    [email protected]

    YES! you can do this.

    use below attributes in respective classes:

    for main page class give {overflow:hidden;}

    for content area class(other then header section) give {overflow-y:scroll;height:calc(100vh – 80px);}

    here 80px is: I assumed height of your header, also if you want your footer to be fixed you can subtract that value from 100vh



    Thanks….This was exactly what I was looking for.

    I’m pretty new to web coding, just trying to see what I can do on my own (of course with help from folks like you)….but I wanted to try and make this happen.

    So thanks again for the code sample

Viewing 5 posts - 16 through 20 (of 20 total)
  • The forum ‘CSS’ is closed to new topics and replies.