css - 垂直滚动条不存在时如何补偿

Question

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

简单地说，我的大部分网页都在宽视口(viewport)中居中。

例如，一个视口(viewport)可能是 1028 像素，而我希望我的页面宽度仅为 960 像素。

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

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

没问题。

当我启动一个比 的高度短的动态页面，然后我的页面扩展(通过 jQuery slideOut 等)低于屏幕底部并导致出现垂直滚动条时，问题就出现了。

它最终使页面在滑出时向左闪烁，然后在滑入时向右闪烁。

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

谢谢。

Answer 1

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

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

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

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