Help - Search - Members - Calendar
Full Version: position: fixed issue
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
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
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).



CharlesEF
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
CharlesEF
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.
Christian J
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...
CharlesEF
Yes, I still need to do more testing. Hopefully, things will work out.
CharlesEF
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?
Christian J
Try adding this for a start:

CODE
<meta name="viewport" content="width=device-width">
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
QUOTE(CharlesEF @ Mar 21 2017, 10:26 PM) *

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.
CharlesEF
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.
Christian J
QUOTE(CharlesEF @ Mar 22 2017, 12:04 AM) *

Well, I removed the overflow rule but that resulted in not being able to scroll at all.

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

QUOTE
I also tried 'overflow: initial;' but again no scrolling.

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.

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

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

pandy
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.
CharlesEF
QUOTE(Christian J @ Mar 21 2017, 08:02 PM) *

Yeah I guess you'd have to remove the fixed positioning too.
#content has no position rule.

QUOTE
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).
Yes, maybe I'll just hide the header and footer sections. I'll think about it, Thanks for the input.
CharlesEF
QUOTE(pandy @ Mar 21 2017, 08:46 PM) *
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.
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.
Christian J
QUOTE(CharlesEF @ Mar 22 2017, 03:20 AM) *

QUOTE(Christian J @ Mar 21 2017, 08:02 PM) *

Yeah I guess you'd have to remove the fixed positioning too.
#content has no position rule.

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.
CharlesEF
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).
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.
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...
CharlesEF
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.
Christian J
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.


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

Thanks for your input.
pandy
Do you still use the overflow? Why? You said you wanted the scroll bar to go all the way to the top? wacko.gif
CharlesEF
QUOTE(pandy @ Mar 24 2017, 09:00 PM) *

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

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.
pandy
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.
CharlesEF
QUOTE(pandy @ Mar 25 2017, 07:54 AM) *

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. sad.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2017 Invision Power Services, Inc.