將絕對div元素超過100％會使整個容器移位

Question

我有一個奇怪的問題。我有一個「容器」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