网站布局在页面之间轻微移动 - 如何阻止它答案

【问题标题】：Website layout moving slightly between pages - how to stop it网站布局在页面之间轻微移动 - 如何阻止它
【发布时间】：2012-02-17 00:16:35
【问题描述】：

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

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

是什么导致了这种轻微的移动，我该如何摆脱它？

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

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

【问题讨论】：

标签： html css

【解决方案1】：

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

添加此样式：

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

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

【讨论】：