将绝对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;
}

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

Answer 1

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

你有：

html, body {
    overflow-x:hidden;
}

这只会隐藏x轴上溢出的东西。你看到的问题（x轴），'垂直'推送第三个div因此设置overflow-x是没用的。

你可以设置：

html, body {
    overflow:hidden;
}

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

jsFiddle here