Firefox 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;，而不是从-50px;中减去top，而是取出亲戚并使用margin-top: -50px;

Demo

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