14

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

简而言之，我将我的大部分网页都集中在宽视口中。

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

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

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

没问题。

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

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

有没有办法通过css强制一个20px的右边距并且仍然利用margin:0 auto;？

谢谢。

4

1 回答 1

11

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

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

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

设置overflow-y: hidden将强制那里永远不会有滚动条。

于 2012-03-10T22:50:00.653 回答