当滚动出现时，居中的 div 会改变位置答案

【问题标题】：Centered div changes position when scroll shows up当滚动出现时，居中的 div 会改变位置
【发布时间】：2011-07-04 21:39:21
【问题描述】：

我有一个居中的 div 容器（通过 margin-left:auto 和 margin-right:auto），加载时页面设计看起来很好...... 在这个 div 下面还有另一个隐藏的，它会根据用户请求显示。但是当这种情况发生时，浏览器滚动会出现并弄乱我的设计，因为居中的 div 也会向左移动几个像素（因此它可以再次位于中心）。

这种行为可以停止吗？

替代解决方案是添加overflow-y:scroll，但我发现不是所有浏览器都支持overflow-y，我找不到哪些浏览器... 有人可以发布一个链接，我可以在其中查看 css3 功能的浏览器支持列表吗？

【问题讨论】：

为什么会出现问题？因为下面的容器不是以相同的方式居中？
如果我理解正确，在您的默认状态下，您没有窗口滚动条，但是当隐藏的 div 可见时，它会增加页面长度并引入滚动条。你认真考虑这“搞砸了你的设计”吗？ overflow-y 是你最好的，也可能是唯一的选择，但老实说，这就是网络应该如何运作的：人们期望事物在与他们交互时会发生变化，并且出现的滚动条是一个强烈的视觉提示，表明某事已经改变了。
@will 你会正确理解它，但是当我问“如何阻止这种行为”时，我并不是要阻止滚动条出现（你可能认为我的意思是，因为你慷慨地解释了它到网络是如何工作的），但我想知道这种 div 容器的重新设置是否可以停止。
@Orbit 这是一个问题，因为我有一些基于用户交互定位 div 的 javascript...这是一个很长的故事，但关键是这几个像素成为一个问题...跨度>
如果您可以链接，最简单的方法是，我想我明白，但我不确定。您也许可以使用 jQuery 将 div 定位为与事件侦听器中的隐藏组件相同的左/右位置。

标签： html css positioning

【解决方案1】：

此 CSS 将始终在您的页面上显示垂直滚动。

body {
    overflow-y: scroll;
}

默认是overflow: auto;

【讨论】：

【解决方案2】：

总是显示滚动，可能不利于布局。

尝试使用 css3 限制正文宽度

body {
    width: calc(100vw - 34px);
}

vw 是视口的宽度（请参阅 this link 以获得一些解释）
calc 在 css3 中计算
34px 代表双滚动条宽度（请参阅 this 以获得固定或 this to calculate如果您不信任固定尺寸）

【讨论】：