Question

也许这是一个简单的解决办法，但它让我疯了很长时间，所以我最终决定看看是否存在解决方案。

简而言之，我将大多数网页放在宽视口中。

例如，一个视口可能是1028px，我希望我的页面宽度只有960px。

所以我的CSS看起来像这样：

#pageWrapper { /* page width is 960 pixels */
    margin:0 auto;
    width:960px;
}

没问题。

问题出现在我启动一个比页面高度更短的动态页面然后我的页面在屏幕底部下方展开（通过jQuery slideOut等）并导致垂直滚动条出现。

它最终会在slideOut期间使页面闪烁，然后在slideIn期间向右闪烁。

是否有某种方法通过css强制使用20px的右边距并仍然利用margin:0 auto;？

感谢。

Answer 1

当页面内容不再垂直放置时，浏览器会在窗口右侧添加滚动条。这会更改浏览器窗口中的可用宽度，因此相对于窗口右侧居中或定位的任何内容都会向左移动一点。这很常见。

有很多方法可以控制它，但最常见的方法是通过控制窗口上的overflow-y属性使其始终具有滚动条或永远不会有滚动条。

设置overflow-y: scroll将强制滚动条始终存在。

设置overflow-y: hidden将强制永远不会成为滚动条。

Answer 2

注意：overflow-y: hidden阻止用户以任何方式向下滚动，有效地使下方视口下方的任何内容无法访问。