position: fixed issue Options

[CharlesEF]

Hi All,

I've run into a problem and I'm hoping someone can point me in the right direction.

Please see this page for an example (HTML and CSS only). The page consists of 3 sections (CSS), red is the header, yellow is the content and blue is the footer. The menu is contained in the content section and has position: fixed defined in the #menu rules. I have found that when position: fixed is used the white background of the menu extends to cover the scroll bar. If position: relative or absolute is used then the background does not cover the scroll bar.

What am I missing? If I visit 'Stack Overflow' there seems to be a fixed header and it does not cover the scroll bar. Why?


Thanks for any help,

Charles

[CharlesEF]

Thanks for that line of code. It fixed the phone problem. I'm going to add that line to my templates file. Oh, even though I can't see a scroll bar the page does scroll correctly.

[Christian J]

Oh, even though I can't see a scroll bar the page does scroll correctly.

A missing scrollbar seems to be "normal" for the iOS browser too. There might be workarounds but I haven't tested.

Note that if there's no visible scrollbar it becomes harder for the user to see that content is cropped and needs to be scrolled, especially on a small screen. One workaround might be to remove the "overflow: auto" from mobile screens with media queries, but detecing a mobile screen vs a small desktop window is yet another exercise.