中心内容的页面移动了滚动条的宽度

Question

我喜欢为网页指定固定宽度，并使用居中布局以获得更好的兼容性。但问题是，一旦出现滚动条，整个内容将向左移动滚动条宽度的一半。

当用户在没有垂直滚动条的页面之间切换时，这可能会特别烦人。在这种情况下，内容并不总是位于中间的相同位置。

问题：是否有最佳做法，以便在浏览时页面不会左/右摆动？

HTML

<div id="content">
    page content, 400px width and centered<br /><br /><br /><br /><br />
    once scroll bars appear<br /><br /><br /><br /><br />
    content is shifted left by the width of the scroll bar<br /><br /><br /><br />
</div>

CSS

#content
{
    width: 400px;
    margin: 0px auto;
    background-color: #f0f0f0;
}

请参阅：jsFiddler

Answer 1

基本上唯一的解决办法是让滚动条始终存在，你在CSS中这样做：

html {
    overflow-y: scroll;
}