网站布局在不同页面之间微微移动 - 如何停止移动

Question

我正在为网站使用固定宽度布局（1000px），通过自动边距使布局居中于屏幕。然而，我发现在一些页面上，布局的位置与其他页面略有不同，原因不明。这让我感到惊讶，因为我使用Django，并为每个页面提供相同的基础模板和样式表，所以我希望它们看起来是一样的。

例如，请查看http://crh.vkuzo.com/。如果加载“主页”和“建议”页面，则布局保持完全相同。但是，如果加载“关于”页面，则可以看到布局稍微向左移动。

是什么导致了这种轻微的移动，如何消除它？

附注：这是容器div的相关CSS（至少我认为是相关的）：

#wholepage {
    width:1000px;
    clear:left;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
}

- vasek1

---

可能是如何防止滚动条重新定位网页？的重复问题。 - Quentin

我相信你看到的布局变化是因为关于页面上显示了滚动条。你可以通过始终显示滚动条来解决这个问题：尝试使用"overflow-y: scroll"。 - dinjas

@Quentin 是的，我没有意识到那是滚动条，然后突然恍然大悟：D - vasek1

Answer 1

这是浏览器的滚动条。请参见：如何防止滚动条重新定位网页？。

- Logan Serman

Answer 2

添加这个样式：

body {
    ...
    overflow-y: scroll;
}

对于居中显示的页面，您希望滚动条始终可见（即使不需要也是如此）。这样，页面就不会根据滚动条是否可见而水平移动。

- Šime Vidas

Answer 3

滚动条正在调整布局。当滚动条出现在浏览器窗口上时，它会将宽度最小化一定数量的像素（滚动条本身的宽度）。

- user596075