Höhe des Elternteils div ist Null, auch wenn es Kind mit endlichen Höhen hat

Question

Ich habe eine Website, deren Layout im Diagramm gezeigt wurde. Der Körper besteht aus einem main container, der aus header, parent div und footer besteht. Die parent div enthält ferner mehrere child div wie gezeigt.

Das Problem ist Höhe aller child div ist endlich. Aber die parent div enthält nichts anderes als die Child Divs. Alle untergeordneten divs sind sichtbar, aber die Höhe des übergeordneten div wird als Null angezeigt. Ich korrigiere auch nicht die Höhe des Eltern-Div durch Angabe eines vorgegebenen Wertes, da dies zu Fehlern führen kann, wenn die Anzahl der Kinder in Zukunft steigt.

Das Problem aufgrund der Nullgröße des Eltern-Div ist, dass mein Footer-Div aufgeht und mit dem Inhalt des Eltern-Div kollidiert. Dies kann gelöst werden, indem man einen geeigneten Rand oben gibt, aber das ist keine Lösung, nach der ich suche.

Kann mir jemand einen Weg vorschlagen, so dass sich die Höhe des Elternteils automatisch ändert, je nachdem, wie groß das Kind ist.

Bitte kommentieren Sie, wenn es unklar ist, ob ich meine Zweifel stelle!

Answer 1

Scheint wie Sie einen Fall für die clearfix class bekommen haben.

Also ich schätze, du schwebst die Child-Div und deshalb ist die Höhe der Eltern-Div 0. Wenn Sie Floats verwenden, passt sich der Elternteil nicht an die Größe der Kinder an.

Wenn Sie aber die Klasse 'clearfix' hinzufügen (natürlich müssen Sie sie in Ihrem Stylesheet haben), wird ein '.' am Ende (unsichtbar natürlich) und Ihre Eltern werden magisch die richtige Höhe haben.

Hinweis, es ist Cross-Plattform, kompatibel IE6 +, Chrome, Safari, Firefox, Sie nennen es!

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

Answer 2

Versuchen Hinzufügen Sie folgendes zu Ihrem Sheet:

#parentdiv:after { 
    content: " "; 
    display: block; 
    clear: both; 
} 

Wie Daedalus in seinem Kommentar vorgeschlagen, Sie Floating wahrscheinlich das Kind divs. Wenn dies der Fall ist, wird es in der obigen Zeile korrigiert.

Das Problem, wenn Sie Dinge schweben, ist, dass ihr Elternelement sie "ignoriert".

Die obige Zeile erstellt und fügt ein (Pseudo-) Element in das #parentdiv ein, das an allen floated divs vorbei geschoben wird. Dann ignoriert das Eltern-div, das die floated-Kinder ignoriert, dieses Pseudo-Element nicht - es verhält sich so, wie es soll, es expandiert, um das Pseudo-Element zu enthalten. Jetzt, da das Pseudo-Element unter allen floated-Kindern liegt, scheint das Eltern-Div, oder noch besser, auch die Floated-Kinder zu "enthalten" - was wirklich das ist, was Sie wollen.