Reason
That's because the p element inside #wrapper has some margin, which may collapse.
Introduction to margin collapse
The CSS 2.1 spec says
8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes [...] can combine
to form a single margin. Margins that combine this way are said to
collapse [...]
Adjoining vertical margins collapse [...]
Your styles
Your #wrapper element has
#wrapper {
height: auto;
min-height: 100%;
}
Old behavior (Firefox)
An old version of the spec said
The bottom margin of an in-flow block-level element with a
'height' of 'auto' and 'min-height' less than the element's
used height and 'max-height' greater than the element's used
height is adjoining to its last in-flow block-level child's bottom
margin if the element has no bottom padding or border.
#wrapper has height: auto. However, in case that the window is taller than its contents, min-height will be the used height (not less). Therefore, margins won't collapse.
This is the behavior observed on Firefox.
New behavior (Chrome)
However, the spec changed, and now the value of min-height does not matter:
Rephrased the rule for adjoining margins so that the 'min-height' and
'max-height' of an element have no influence over whether the
element's bottom margin is adjoining to its last child's bottom
margin.
The new rule is
[The] bottom margin of a last in-flow child and [the] bottom margin of
its parent [are adjoining] if the parent has 'auto' computed height
Therefore, since height is auto, margins should collapse.
This is the behavior observed on Chrome.
Note
Here the current spec seems to imply that min-height: 0 is a requirement:
The above rules imply that the bottom margin of an in-flow block box
with a 'height' of 'auto' and a 'min-height' of zero
collapses with its last in-flow block-level child's bottom margin
[...]
But it is not. The sentence will be clarified in CSS 2.2.
Illustration
The following snippet animates min-height to illustrate the difference of behaviors between Chrome and Firefox:
- When
min-height is smaller than content's height,
- The used
height is content's one
- Margins collapse both on Chrome and Firefox
- Otherwise,
- The used
height is min-height
- Margins collapse on Chrome but not on Firefox
Therefore, when min-height reaches content's height, on Firefox there is a sudden (dis)apparition of the space caused by margin collapse.
#wrapper {
background: orange;
margin: 0 1em;
-webkit-animation: animate 1s linear infinite alternate;
animation: animate 1s linear infinite alternate;
}
footer {
background: red;
}
p {
margin: 1em 0;
height: 1.75em;
background: green;
}
@-webkit-keyframes animate {
from { min-height: 4em; }
to { min-height: 6em; }
}
@keyframes animate {
from { min-height: 4em; }
to { min-height: 6em; }
}
/* Content is 4.5em tall */
<div id="wrapper">
<p>Line 1</p>
<p>Line 2</p>
</div>
<footer>Footer</footer>
