Scrollbar shifts content
I have: I have several web pages both with this outline:
<body>
<div id="container">
CONTENT
</div>
</body>
with the CSS:
body{
color:#000000;
background-color:#FFFFFF;
background-image: url(background.jpg);
background-repeat: repeat-x;
font-family: verdana;
letter-spacing: 1px;
}
#container{
margin-left:auto;
margin-right:auto;
margin-top:5px;
width: 700px;
}
Problem: All pages are short so that no scroll bar shows up, but one page is longer so a vertical scroll bar on the right shows up. This second page causes the container to be shifted (to the left) just a bit.
From what I understand a common solution is to make the scrollbar show up on all pages, but I really want to avoid that since it is just one page out开发者_JS百科 of many.
Question: Is there a way to avoid shifting the container while still having it centered without making the scrollbar show up on all pages?
People with large monitors will never see a scrollbar on any page.
People with small monitors will always see scrollbars on all pages.
Despite monitor size, people are free to make any browser window any size and cause scrollbars.
Oh and let's not forget about people that like to add a dozen browser toolbar addons making the browser window's content area half as high as it could be.
That's just how it is and no static solution is going to get around that. Changing the margin on one page is not a solution for reasons listed above.
If you insist on fixing something people have learned to live with, it's going to have to be a "dynamic" JavaScript solution where you calculate your left margin and add the width of the scrollbar. For different browsers, bars are different widths so you will have to calculate this too.
Edit: Like someone said in another answer, this is default browser behavior and should be left alone.
Edit2: As user dampe said in comments, you'll also have to trigger the JavaScript after each time the window is resized by the user.
This is going to be an epic waste of your time. Typically, default behavior of the browser is left to the browser. Way too many variables to account for and you're bound to miss something if you don't have every scenario, skin, OS, browser version, browser brand, toolbar add-on, monitor type, size, etc. to be testing with. Once you start getting this working, you'll find you need to make exceptions and corrections for Explorer. Before you know it, you end up with a massive piece of bloat... and for what? What's the value of this?
Starting point: 100% guaranteed expected behavior in all browsers & situations.
Ending point: guaranteed looking great in your monitor/system only... you take a risk that it will look like junk on a system/scenario you haven't even thought about.
Search for a pre-made JavaScript solution or a jQuery plugin first... if you can't find one, ask yourself why?
- not practical
- not possible
- not worth the trouble (low demand)
Edit3: I did some searching to satisfy my curiosity. I found a thread with a jQuery solution as well as links to methods for calculating the scrollbar width.
IMHO, this is a waste of time and resources but here's the link for anyone interested...
http://expressionengine.com/archived_forums/viewthread/158703/
Edit4: Here's a CSS solution that I found. I have not tested this but if it works it would be sweet.
html {
overflow-y: scroll;
}
http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem
Edit5: CSS solution works but not to my liking. It creates scrollbars for every page yet when not needed they are grayed out or empty... not elegant.
I don't know about pure CSS solution, but you can use javascript to dynamically count and adjust correct width of left margin (while making the right margin a bit thinner - by size of scrollbar).
BTW: IMO: The correct way of dealing with this is: Leave it as it is. Because it is a default behavior and I don't think that users are worried about this as much as you are. This is my opinion and someone might have different one, but adding scrollbar to every page (to solve this) is epic fail. :)
You could also, with php, add a left-padding value when you're on the long page, but the scrollbar will be different widths in different browsers/platforms, so javascript would be the only pixel-perfect solution.
If you want a pure css option, i believe an absolute positioned div inside the body with width and height of 100%, overflow auto and right padding larger than the width of a scroll bar, will replace the normal scrollbar without shifting the content to the left on long pages.
I know i used this technique a long time ago, but i cant remember the exact css quirks i had to use.
加载中,请稍侯......
精彩评论