你如何集中于960px宽的网站布局？

Question

...不使用保证金：0自动;

为什么呢？它会导致带有滚动条的页面与没有滚动条的页面具有不同的中心位置，因此在浏览页面时，div会跳跃。你有什么建议，伙计们？

Answer 1

我担心“跳跃”效果是不可避免的，因为滚动条会影响视口宽度，进而影响页面的中心线。无论采用何种技术（text-align: center;，position: -50%;等），都会发生这种情况。

解决方法是强制始终显示垂直滚动条。使用此：

html { overflow-y: scroll; }

From here，但你可以忽略该页面上的大部分样本并跳到最底层。

请注意，overflow-x和overflow-y最初是CSS2.x标准overflow属性上的Microsoft扩展。但是，overflow-x和overflow-y都在CSS3中。

Answer 2

一种方法是将overflow-y: scroll;提供给所有网页上的HTML标记，这样它们就会显示右侧的滚动条（对于不需要它的页面不活动）。这样，所有页面的客户端宽度都相同。

Answer 3

纯CSS？只是强迫滚动条始终显示，正如其他答案所说的那样。

另一条途径是通过JavaScript - 在DOM上检测页面是否有滚动条，并相应地轻推容器。

Answer 4

试试这个：

.width960container{
    width:960px;
    min-height:500px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-250px 0 0 -480px;
}