Wie kann ich floated Kind div's Höhe auf die Höhe des Elternteils erweitern?

Question

Ich habe die Seitenstruktur wie folgt:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Nun, die child-left DIV wird mehr Inhalt haben, so dass die parent Die Höhe des DIV erhöht sich entsprechend dem untergeordneten DIV.

Aber das Problem ist child-right Die Höhe nimmt nicht zu. Wie kann ich seine Höhe mit der seines Elternteils gleich machen?

Answer 1

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

Ich habe den Inline-Stil verwendet, um eine Idee zu vermitteln.

Answer 2

Ich kann sehen, dass die akzeptierte Antwort Folgendes verwendet position: absolute; anstelle von float: left . Falls Sie Folgendes verwenden möchten float: left mit der folgenden Struktur,

<div class="parent">
    <div class="child-left floatLeft"></div>
    <div class="child-right floatLeft"></div>
</div>

Geben Sie position: auto; zum übergeordneten Element, damit es die Höhe seiner Kinder enthält.

.parent {
    position: auto;
}
.floatLeft {
    float: left
}

Answer 3

Ich habe diesen netten Trick bei einem Vorstellungsgespräch für ein Praktikum kennengelernt. Die ursprüngliche Frage ist, wie man sicherstellt, dass die Höhe jeder oberen Komponente in drei Spalten die gleiche Höhe hat, die alle verfügbaren Inhalte anzeigt. Grundsätzlich erstellen Sie eine untergeordnete Komponente, die unsichtbar ist, die die maximal mögliche Höhe rendert.

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>