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]

After doing some research and looking at the apps on my phone, it seems the scroll bar does disappear. Some apps show the scroll bar only while the app is loading. Once loaded the scroll bar only appears once you start to scroll. Some apps don't show a scroll bar at all, but you can still scroll.

I guess the scroll bar is 'implied' on mobile phones? I did find some CSS for webkit browsers to force showing the scroll bar. However, I didn't find any CSS for other browsers.