html - Firefox 100% height div - scrollbar showing up

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

你会因为这个而滚动

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

您正在使用and 而不是从position: relative;中减去，而是取出相对值并使用-50px;topmargin-top: -50px;

演示

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