Ich habe folgendes:
CSS
#pageBody
{
height: 500px;
padding:0;
margin:0;
/*border: 1px solid #00ff00;*/
}
#pageContent
{
height:460px;
margin-left:35px;
margin-right:35px;
margin-top:30px;
margin-bottom:30px;
padding:0px 0 0 0;
}
<div id="pageBody">
<div id="pageContent">
<p>
blah blah blah
</p>
</div>
</div>
Wenn ich die Begrenzungslinie in pageBody nicht kommentiere,alles passt süß ... Ich hatte die Grenze, um zu überprüfen, dass alles wie erwartet war. Wenn Sie jedoch den Rahmen entfernen, lässt pageBody die Seite um 20 Pixel herunter, während PageContent sich scheinbar überhaupt nicht bewegt.
Nun ist dies nicht die eigentliche Seite, sondern eine Untermenge. Wenn nichts offensichtlich ist, kann ich versuchen, eine funktionierende Minimalprobe zu erstellen, aber ich dachte, es könnte eine einfache schnelle Antwort geben.
Ich sehe genau das gleiche Problem in Chrome und IE8,Ich schätze mich, dass die 1px-Grenze möglicherweise ein Wendepunkt war, der den Inhalt eines div nur zu groß machte, aber die Änderung der #pageContent-Höhe auf z die Unterseite von diesem div.
Antworten:
5 für die Antwort № 1Anscheinend, wenn Sie einen Rand oder Rand hinzufügen pageBody, die Spitze von pageContent wird berechnet als pageBody.border + pageBody.margin + pageContent.margin-top. Sonst scheint es das zu ignorieren pageContent.margin-top.
Dies ist ein typischer Fall von Marge kollabiert
3 für die Antwort № 2
Ränder kollabieren.
(Sichtbar mit #pageBody rotem Hintergrund und #pageContent blauem Hintergrund.)
Das heißt: Da beide Blockelemente sind und sich die Ränder berühren, kollabieren sie zusammen und der größere bleibt erhalten.
Wenn zwischen beiden Rändern ein Rand oder eine Auffüllung vorhanden ist, sind sie nicht angrenzend und kollabieren daher nicht.
Das erwartete Verhalten: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
1 für die Antwort № 3
Versuchen Sie die Einstellung position: relative; auf Ihrem Div "s ... Ich hatte, dass ähnliche Probleme vor zu beheben.