position: fixed issue |
position: fixed issue |
CharlesEF |
Mar 20 2017, 07:31 PM
Post
#1
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 |
Mar 21 2017, 06:04 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 |
Mar 21 2017, 08:02 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,668 Joined: 10-August 06 Member No.: 7 |
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). |
CharlesEF |
Mar 21 2017, 09:20 PM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Yeah I guess you'd have to remove the fixed positioning too. 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. |
Christian J |
Mar 21 2017, 09:39 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,668 Joined: 10-August 06 Member No.: 7 |
Yeah I guess you'd have to remove the fixed positioning too. 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. |
Lo-Fi Version | Time is now: 21st May 2024 - 04:02 PM |