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

[Christian J]

To imply scrollability, you might use an opacity gradient on the bottom part of the scrollable box. Of course that reduces the readable area even more, and maybe people won't notice the gradient on small screens anyway, so in addition perhaps you could add a "down arrow" CSS background-image in front of the gradient.

Or you could display a picture of a scrollbar as a CSS background-image, but maybe that will becomes weird in mobile browser that do display a scrollbar.

But the easiest for everybody is probably to design the page so no CSS scrollbars are necessary for smallscreen users...