帶有居中內容的頁面移動了滾動條的寬度

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; 
}