滚动条移动内容
我有：我有几个网页都具有以下轮廓：
<body>
<div id="container">
CONTENT
</div>
</body>
使用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;
}
问题：所有页面都很短，因此不会显示滚动条，但有一个页面较长所以右侧会出现一个垂直滚动条。第二页导致容器稍微移动（向左）。
据我了解，一个常见的解决方案是让滚动条显示在所有页面上，但我真的想避免这种情况，因为它只是许多页面中的一页。
问题：有没有办法避免移动容器，同时仍使其居中而不使滚动条显示在所有页面上？
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 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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
拥有大显示器的人永远不会在任何页面上看到滚动条。
使用小显示器的人总是会在所有页面上看到滚动条。
无论显示器大小如何，人们都可以自由地将任何浏览器窗口设置为任何大小并引起滚动条。
哦，我们不要忘记那些喜欢添加十几个浏览器工具栏插件的人，使浏览器窗口的内容区域高至其所能达到的一半。
事情就是这样，没有任何静态解决方案可以解决这个问题。由于上述原因，更改一页上的边距并不是解决方案。
如果你坚持修复人们已经习惯的东西，那么它必须是一个“动态”JavaScript 解决方案，你可以在其中计算左边距并添加滚动条的宽度。对于不同的浏览器，条形的宽度不同，因此您也必须计算它。
编辑：就像有人在另一个答案中所说的那样，这是默认的浏览器行为，应该保留。
编辑2：正如用户dampe在评论中所说，每次用户调整窗口大小后，您还必须触发JavaScript。
这将是对你时间的极大浪费。通常，浏览器的默认行为由浏览器决定。需要考虑的变量太多，如果您没有要测试的所有场景、皮肤、操作系统、浏览器版本、浏览器品牌、工具栏插件、显示器类型、尺寸等，您一定会错过一些东西。一旦开始工作，您会发现需要对资源管理器进行例外和更正。在你不知不觉中，你就已经出现了巨大的浮肿……为什么呢？这有什么价值？
起点： 100% 保证所有浏览器和浏览器中的预期行为情况。
终点：保证仅在您的显示器/系统中看起来很棒...您冒着它在您从未想过的系统/场景中看起来像垃圾的风险。
首先搜索预制的 JavaScript 解决方案或 jQuery 插件...如果找不到，问问自己为什么？
Edit3：我做了一些搜索来满足我的好奇心。我找到了一个带有 jQuery 解决方案的线程以及计算滚动条宽度的方法的链接。
恕我直言，这是浪费时间和资源，但这是任何感兴趣的人的链接...
http://expressionengine.com/archived_forums/viewthread/158703/
Edit4：这是我找到的CSS解决方案。我还没有测试过这个，但如果它有效的话那就太好了。
http://haslayout.net/css-tuts/Fishing-Page-Shift-Problem
Edit5： CSS 解决方案有效，但不符合我的喜好。它为每个页面创建滚动条，但当不需要时，它们会变灰或为空......不优雅。
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?
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.
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.
我不知道纯 CSS 解决方案，但您可以使用 javascript 动态计算和调整左边距的正确宽度（同时使右边距更薄 - 根据滚动条的大小）。
顺便说一句：IMO：处理此问题的正确方法是：保持原样。因为这是默认行为，我认为用户不会担心这和你一样。这是我的观点，有人可能有不同的观点，但是向每个页面添加滚动条（以解决此问题）是史诗般的失败。 :)
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. :)
当您在长页面上时，您还可以使用 php 添加左填充值，但滚动条在不同的浏览器/平台中会有不同的宽度，因此 javascript 将是唯一像素完美的解决方案。
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.
如果你想要一个纯CSS选项，我相信主体内的绝对定位div，宽度和高度为100％，溢出自动和右填充大于滚动条的宽度，将替换正常的滚动条，而不将内容移动到留在长页上。
我知道我很久以前就使用过这种技术，但我不记得我必须使用的确切 CSS 怪癖。
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.