Firefox 100％高度div-出现滚动条

Question

My Problem is described by this Code:

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

Stylesheet:

    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;
}

​or in this jsfiddle:

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

If you look at it, all things are in place - like they should be.

In Chrome and IE no scrollbar shows up. But in FF there is a scrollbar and you can scroll beyond that red div - this shouldn't be possible!

Making the any of the divs positon:absolute is not the answer I am searching for.

Answer 1

You get scroll because of this

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

You are using position: relative; and than you are subtracting -50px; from top , instead take relative out and use margin-top: -50px;

Demo

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