html - 防止居中布局在出现滚动条时移动其位置

Question

我的页面布局看起来 something like this :

<style type="text/css">
#content-wrap
{
    margin: 0 auto;
    width: 800px;
}
</style>

<div id="content-wrap">
</div>

您会注意到，当垂直滚动条出现时，content-wrap div 稍微移动了它的位置。一种情况是当浏览器开始逐步呈现页面而不显示垂直滚动条时，然后确定需要滚动条，因为内容高于“折叠”。这会将 div 向左移动大约 10px。

在不强制浏览器始终显示滚动条的情况下，解决此问题的最佳方法是什么？

Answer 1

恐怕解决此问题的最佳方法是使用 html {overflow-y: scroll;} 强制滚动条始终可见。您遇到的问题是，当滚动条出现时，“可用区域”缩小了 10 像素。这会导致左侧的计算边距缩小滚动条宽度的一半，从而将居中的内容稍微向左移动。

一个可能的解决方案可能是用 JavaScript 计算边距而不是使用 margin: 0 auto; 并以某种方式补偿滚动条出现时“丢失”的像素，但我担心它会很乱，并且在您计算和应用新边距时内容可能会移动一点。