css - 将绝对 div 元素推到 100% 以上会使整个容器移动

Question

我有一个奇怪的问题。我有一个“容器” div 封装了我的页面内容，在其中我还有另外三个 div 块。

容器内的三个 div 块恰好适合屏幕高度的 100%，但是当我将第三个 div 块推到超过 100% 标记时，整个“容器”div 向左移动了大约 20px。

这是我的 jfiddle：http: //jsfiddle.net/Y7y5R/

通过改变：

#secondaryContent{
   position: absolute;
   width: 100%;
   top: 50%;
   height: 50%;
   background-color: red;
}

至

#secondaryContent{
   position: absolute;
   width: 100%;
   top: 60%;
   height: 50%;
   background-color: red;
}

你会看到我要解释的。我只是在寻找为什么会发生这种情况的解释。

score 2 · Accepted Answer

这是因为您使用的是绝对定位，它会从正常流程中删除元素。使用此定位，设置height:100%将不包含元素。

你有过：

html, body {
    overflow-x:hidden;
}

这只会隐藏 x 轴上溢出的东西。您看到的问题（x 轴），div垂直“推动”第三个..因此设置overflow-x是无用的。

您可以简单地设置：

html, body {
    overflow:hidden;
}

这将隐藏问题，因为您将不再看到这种转变。至于您看到这种转变的原因，100% != 110%. 您将不得不重新计算定位。

1 回答 1