CSS Container Div bekommt keine Höhe

116

Ich möchte, dass mein Container div die maximale Höhe seiner Kindergröße erreicht. ohne zu wissen, welche Größe das Kind divhaben wird. Ich habe JSFiddle ausprobiert . Der Behälter divist rot. was nicht auftaucht. Warum?

css css-float liquid-layout Neel Basu
quelle

Antworten:

282

Fügen Sie die folgende Eigenschaft hinzu:

.c{
    ...
    overflow: hidden;
}

Dadurch wird der Container gezwungen, die Höhe aller darin enthaltenen Elemente unabhängig von schwebenden Elementen zu berücksichtigen.
http://jsfiddle.net/gtdfY/3/

AKTUALISIEREN

Vor kurzem habe ich an einem Projekt gearbeitet, für das dieser Trick erforderlich war, das jedoch einen Überlauf zulassen musste. Stattdessen können Sie ein Pseudoelement zum Löschen Ihrer Floats verwenden, um den gleichen Effekt zu erzielen und gleichzeitig einen Überlauf für alle Elemente zuzulassen.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

Nachtfeuerkatze
quelle
8
Grundsätzlich zwingt das Hinzufügen dieser Eigenschaft das äußere Feld dazu, die Regel für schwebende Container zu ignorieren, bei der die Höhe für Container nicht berechnet wird, und sie für die vollständige Hintergrundzeichnung anzuwenden.
Nightfirecat
4
Wow, ich sagte: "Was? Das wird nicht funktionieren." Aber ich werde verdammt sein. Ich dachte total, es würde sich nicht richtig verhalten. Dank
fie
1
Ist das nicht wirklich ziemlich hackig? Für mich macht es den Zweck des Überlaufs zunichte. Ich verstehe nicht, warum dies die richtige und am besten bewertete Antwort ist.
Andrew Weir
3
@ AndrewWeir Ich gebe zu, bis jetzt war ich mir nicht ganz sicher, warum diese Methode zum Erweitern von Containern, um Floats in ihrer Größe korrekt zu berücksichtigen, funktioniert. Nach zu mehreren Quellen , so scheint es , dass dies ein Element bewirkt , dass sein Rendering - Modus ändern, so dass von sichtbarem Überlauf nicht so tun, und so, diese Kräfte Elemente dabei , dass Überlauf zu verbieten.
Nightfirecat
2
Der erste Weg, Überlauf zu verwenden, funktioniert für mich. Der zweite Weg funktioniert AUCH und scheint weniger riskant zu sein, falls ich in Zukunft einen Überlauf habe. Ich wünschte nur, ich könnte zweimal upvoten.
Tyler Collier
28

Sie schweben die Kinder, was bedeutet, dass sie vor dem Container "schweben". Um die richtige Höhe zu erreichen, müssen Sie den Schwimmer "räumen"

Der div style = "clear: both" löscht das Floating und gibt dem Container die richtige Höhe. Weitere Informationen zu Floats finden Sie unter http://css.maxdesign.com.au/floatutorial/clear.htm .

z.B.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>
Yoeri
quelle
Dies ist klar: beides; Das Ding scheint eine richtige Lösung für die Höhe des Containers zu sein, denn das Problem sind die schwebenden Kinder. Dieser Ansatz scheint also besser zu sein als der Überlauf: versteckt; eins oben.
Ronnie Depp
Vielen Dank an @Yoeri für das Teilen dieser einfachen Lösung. Daumen hoch! Ich suche nach der gleichen Lösung für mein neues Design wie vor fast 6 Jahren, seit ich das letzte Mal ein Weblayout entworfen habe, nachdem ich mich ausschließlich auf die PHP-Entwicklungsperspektive und nicht auf die Design-Seite konzentriert hatte.
Ronnie Depp
20

Ist das nicht einfacher?

.c {
    overflow: auto;
}
Antonio Romero Oca
quelle
Ja, es ist: D. Vielen Dank
Alauddin Ahmed
4

Versuchen Sie, dieses Clearing-Div vor dem letzten einzufügen </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

Lee
quelle
3

Die beste und kugelsicherste Lösung ist das Hinzufügen ::beforeund ::afterPseudoelemente zum Behälter. Wenn Sie zum Beispiel eine Liste haben wie:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

Und jedes Element in der Liste hat eine float:leftEigenschaft, dann sollten Sie Ihrem CSS hinzufügen:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Oder Sie könnten eine display:inline-block;Eigenschaft ausprobieren , dann müssen Sie keinen Clearfix hinzufügen.

Agata
quelle