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

Seems the scrollbar is created for #wrapper DIV with CSS. If you instead let the BODY section create its default scrollbar I don't think it will be covered by the menu.

Or you could place the menu above #wrapper so they don't occupy the same vertical space.

Or you might position the menu away from #wrapper's scrollbar space with e.g. "left: 0; right: 20px", except that I don't know if scrollbar widths are the same in different OSs (there's a setting for changing its width in Windows, but I don't know if anyone uses it).

I'm pretty sure I tried it that way with the first version of the page. I had 4 CSS sections in the body section. It's been a few days since I tried it but if I remember correctly, having the menu in its own container caused the drop down menu options to not show. I thought it was because of the fixed height of the menu container.

I'll do some more tests and post back if I still need help.

Thanks

Ok, I think I've worked it out. I still had to use the 'wrapper' class but I figured out how to make the scroll bar show. In the 'wrapper' class I had to add a rule: 'height: auto;'. I had to add a couple of media queries for when the menu bar wraps but it seems to work as I wanted. If you want to see it click here.

There's no overlapping now, except from the submenus (where it doesn't matter).

But as a sidenote, what does it look like on mobile browsers? Make sure that the fixed part doesn't cover too much of the screen (or remove the fixed style for small screens altogether with media queries).

Also check that the dropdowns can be opened with touch events. Normally a touch event fires both a hover and a click event, with confusion as a result...

Yes, I still need to do more testing. Hopefully, things will work out.

I used my android phone to test the page. The entire page showed except it was a miniature version. I had always thought that reducing my desktop browser window would simulate small screens. When I reduce my browser window the menu will wrap. It doesn't do this on my phone. In portrait mode I can see the entire page, from 1st line of text to last line of text. In landscape mode the scroll bar should appear but it doesn't.

Seems I have a lot of research to do. Any ideas?

Try adding this for a start:

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.

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.

Well, I removed the overflow rule but that resulted in not being able to scroll at all. I also tried 'overflow: initial;' but again no scrolling.

Once I touch the screen and begin to scroll I do see a scroll bar but otherwise I don't see any scroll bar.

Yeah I guess you'd have to remove the fixed positioning too.


No, that's equivalent to "overflow: visible". If you use that together with "height: auto" the content would expand, but remain obscured by the fixed sections.


I got a couple of silly ideas about using CSS backgrounds to fake a scrollbar, but frankly I think it's best to just make the page simpler for mobile (no fixing and no scrolling).

This is how you want it, isn't it?

Click to view attachment

Remove all instances of position: fixed you already have. Remove the wrapper DIV. Remove the overflow delclaration.

Wrap #header and #nav in a common DIV and make that DIV fixed and give it a 100% width. You also need to increase the top margin for #content. I didn't check properly, but a little less than 150px.

#content has no position rule.

Yes, maybe I'll just hide the header and footer sections. I'll think about it, Thanks for the input.

Yes, when I first started out that was the goal but as I coded things changed. I think I'll go ahead and create a page based on your suggestion. That way I can test both versions on mobile phones.

Oh, the current version is here.

No I meant the positioned header and footer --if you can't scroll #content, the former two must not cover its text content (in other words, a traditional layout for mobile).

You could also use a top (and bottom) margin for #content like pandy wrote, though the fixed parts will of course use a lot of space on a small mobile screen.

I'm still thinking but maybe I could just reduce the height of the header to show only the company name and hide the footer. Like I said, I'm still thinking (and working on another version).

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.

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...

TBH, my scroll bar seems to act just like other scroll bars so I don't think I'm going to do anything special. Still doing research so I might change my mind.

As long as users realize content needs to be scrolled, they'll hopefully know how to do it on their devices, at least with normal body content. But will they recognize a scrollable DIV? Sometimes a DIV's bottom content is clearly cut-off, but in other cases the bottom of the scrollable DIV coincides with the ending of a text paragraph, while the next paragraph is completely out of view.

Those are thing I will ponder as I do research and design my mobile site further.

Thanks for your input.

Do you still use the overflow? Why? You said you wanted the scroll bar to go all the way to the top?

Actually, I really only want a scroll bar in areas that can scroll, like my current web design. While your design did look like what I wanted I didn't care for the full body scroll bar.

Thanks for your input.

Then I don't understand. You originally complained about that the fixed part covered the scroll bar (which it didn't really). I thought that was the problem you wanted help with.

The problem. I think, was that I didn't understand the problem well enough to ask the right question.