火狐100％高度的div表示向上滾動

Question

我的問題是由該代碼描述：

<div class="test"></div> 
<div class="extra"></div> 

樣式表：

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
div.test { 
    width: 100%; 
    background: #ccc; 
    height: 100%; 
} 
div.extra { 
    position:relative; 
    height:50px; 
    background:red; 
    top:-50px; 
} 

或在此的jsfiddle：

http://jsfiddle.net/XnKmW/3/

如果你看看它，所有的事情都已經到位 - 就像他們應該做的一樣。

在Chrome和IE中不顯示滾動條。但在FF中有一個滾動條，你可以滾動超過紅色的div - 這不應該是可能的！

製作任何divs positon：絕對不是我正在尋找的答案。

Answer 1

你得到滾動因爲這個

div.extra { 
    position:relative; 
    height:50px; 
    background:red; 
    top: -50px; 
} 

您使用position: relative;和比你減去top-50px;，而不是採取相對並使用margin-top: -50px;

Demo

div.extra { 
    height:50px; 
    background:red; 
    margin-top:-50px; 
}