overflow-y: auto|scroll 导致水平移位答案

【问题标题】：overflow-y: auto|scroll causes horizontal shiftoverflow-y: auto|scroll 导致水平移位
【发布时间】：2012-07-03 03:14:13
【问题描述】：

我遇到了类似于Adding overflow-y to block element causes width to decrease. 的问题，但我希望我的右侧 div 水平居中。所以我有“边距：自动；”在右边的 div 上。

在我将“overflow-y: auto”（或滚动）添加到右侧 div 之前，这一直很好。在此之前，边距是从整个页面宽度测量的。添加后，它从左侧 div 的右边缘开始测量，因此它不是以页面为中心，而是以页面的其余部分为中心。

问题的简单演示：

【问题讨论】：

【解决方案1】：

当您在div 上添加overflow 属性时，您定义了一个新的格式化上下文。如MDN documentation on this subject 中所述，float 的影响仅限于特定的格式化上下文。格式化上下文由上述文档中列出的特定规则定义。

position: absolute 是一种解决方案，但您必须了解绝对定位的元素是相对于它们最后定位的祖先定位的（即具有position 属性且值不同于static（默认值）的元素）。也look at MDN 完全掌握这个概念。

您可以阅读this article on SitePoint，它深入解释了浮动元素。您应该对多列布局的浮动与绝对定位部分更感兴趣。

【讨论】：

【解决方案2】：

您可以添加位置：绝对；到侧边栏实现与第二个示例相同的效果。

【讨论】：

我不知道确切的原因，但正如您所说，溢出-y 导致右 div 居中于页面的其余部分。通过将 position:absolute 添加到左侧 div （这会导致它忽略 float: left; 顺便说一句），您可以将其从文档的正常流程中删除，这会导致右侧 div 在页面中居中，就好像左侧 div 不是'在那里。