 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 |
  |
 
|
  |
Replies
| 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,656 Joined: 10-August 06 Member No.: 7 |
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). |
|
|
|
| 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 |
QUOTE(Christian J @ Mar 21 2017, 08:02 PM) 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. |
|
|
|
Posts in this topic
CharlesEF position: fixed issue Mar 20 2017, 07:31 PM
Christian J Seems the scrollbar is created for #wrapper DIV wi... Mar 20 2017, 09:03 PM CharlesEF I'm pretty sure I tried it that way with the f... Mar 21 2017, 12:19 AM CharlesEF Ok, I think I've worked it out. I still had t... Mar 21 2017, 07:41 AM Christian J There's no overlapping now, except from the su... Mar 21 2017, 11:05 AM CharlesEF Yes, I still need to do more testing. Hopefully, ... Mar 21 2017, 12:03 PM CharlesEF I used my android phone to test the page. The ent... Mar 21 2017, 03:35 PM Christian J Try adding this for a start:
<meta name=... Mar 21 2017, 03:57 PM CharlesEF Thanks for that line of code. It fixed the phone ... Mar 21 2017, 04:26 PM
Christian J
Oh, even though I can't see a scroll bar the ... Mar 21 2017, 05:18 PM pandy This is how you want it, isn't it?
Remove ... Mar 21 2017, 08:46 PM CharlesEF Remove all instances of position: fixed you alread... Mar 21 2017, 09:26 PM Christian J
Yeah I guess you'd have to remove the fixed ... Mar 21 2017, 09:39 PM CharlesEF I'm still thinking but maybe I could just redu... Mar 21 2017, 11:58 PM CharlesEF After doing some research and looking at the apps ... Mar 24 2017, 02:52 PM Christian J As long as users realize content needs to be scrol... Mar 24 2017, 08:33 PM Christian J To imply scrollability, you might use an opacity g... Mar 24 2017, 05:47 PM CharlesEF TBH, my scroll bar seems to act just like other sc... Mar 24 2017, 06:46 PM CharlesEF Those are thing I will ponder as I do research and... Mar 24 2017, 08:46 PM pandy Do you still use the overflow? Why? You said you w... Mar 24 2017, 09:00 PM CharlesEF
Do you still use the overflow? Why? You said you ... Mar 25 2017, 01:03 AM pandy Then I don't understand. You originally compla... Mar 25 2017, 07:54 AM CharlesEF
Then I don't understand. You originally compl... Mar 25 2017, 08:59 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 07:54 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC