我有：我有几个网页都有这个大纲：
<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;
}
问题：所有页面都很短，因此没有滚动条显示，但是一页较长，因此右侧的垂直滚动条显示出来。第二页使容器稍微移位（向左）。
根据我的理解，一个常见的解决方案是让滚动条显示在所有页面上，但我真的想避免这种情况，因为它只是许多页面中的一页。
问题：有没有办法避免移动容器，同时让容器居中而不会在所有页面上显示滚动条？
答案 0 :(得分：10)
我不知道纯CSS解决方案，但您可以使用javascript动态计算和调整左边距的正确宽度（同时使右边距更薄 - 按滚动条的大小）。
BTW：IMO：解决这个问题的正确方法是： 保持原样。 因为这是一种默认行为，我认为不是用户像你一样担心这件事。这是我的观点，有人可能有不同的，但向每个页面添加滚动条（解决此问题）是史诗般的失败。 ：）答案 1 :(得分：10)
拥有大型显示器的人永远不会在任何页面上看到滚动条。
拥有小型显示器的人将始终在所有页面上看到滚动条。
尽管监视器大小，人们可以自由地制作任何大小的浏览器窗口并导致滚动条。
哦，让我们不要忘记那些喜欢添加十几个浏览器工具栏插件的人，使浏览器窗口的内容区域尽可能高。
就是这样，没有静态的解决方案可以解决这个问题。由于上面列出的原因，更改一页上的边距不是解决方案。
如果您坚持修复人们已经学会使用的东西，那么它必须是一个“动态”JavaScript解决方案，您可以在其中计算左边距并添加滚动条的宽度。对于不同的浏览器，条形宽度不同，因此您也必须计算它。
编辑：就像有人在另一个回答中说的那样，这是默认的浏览器行为，应该保持不变。
Edit2：正如用户在评论中所说，每次用户调整窗口大小后，您还必须触发JavaScript。
这将是一个史诗般的浪费你的时间。通常，浏览器的默认行为留给浏览器。如果你没有每个场景，皮肤，操作系统，浏览器版本，浏览器品牌，工具栏附加组件，显示器类型，尺寸等等，那么你需要考虑太多的变量而且你必须要错过一些东西。 。一旦开始使用，您将发现需要为Explorer进行例外和更正。在你知道它之前，你最终会得到一大块膨胀......为了什么？这有什么价值？
起点：100％保证所有浏览器中的预期行为＆amp;的情况。
结束点保证只在你的显示器/系统中看起来很棒......你冒险在你甚至没想过的系统/场景中看起来像垃圾。
首先搜索预制的JavaScript解决方案或jQuery插件......如果找不到，请问问自己为什么？
编辑3：我做了一些搜索以满足我的好奇心。我找到了一个带有jQuery解决方案的线程，以及指向计算滚动条宽度的方法的链接。
恕我直言，这是浪费时间和资源，但这里是任何感兴趣的人的链接......http://expressionengine.com/archived_forums/viewthread/158703/
Edit4：这是我找到的CSS解决方案。我没有对此进行过测试，但如果有效则会很好。
html {
overflow-y: scroll;
}
http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem
编辑5： CSS解决方案有效但不符合我的喜好。它为每个页面创建滚动条但是在不需要时它们会变灰或变空......不优雅。
答案 2 :(得分：0)
你也可以使用php在长页面上添加左边填充值，但滚动条在不同的浏览器/平台上会有不同的宽度，因此javascript将是唯一的像素完美解决方案。 / p>
答案 3 :(得分：0)
如果你想要一个纯粹的CSS选项，我相信身体内部的绝对定位div宽度和高度为100％，溢出自动和右边填充大于滚动条的宽度，将取代普通的滚动条而不移动长页面左侧的内容。
我知道很久以前我使用过这种技术，但是我不记得我必须使用的确切的css怪癖。