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

Para el parent Element fügen Sie die folgenden Eigenschaften hinzu:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

dann für .child-right diese:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Ausführlichere Ergebnisse mit CSS-Beispielen aquí und weitere Informationen über gleich hohe Spalten aquí .

Answer 2

Eine gängige Lösung für dieses Problem ist die absolute Positionierung oder beschnittene Floats. Diese sind jedoch insofern problematisch, als sie eine umfangreiche Anpassung erfordern, wenn sich die Anzahl und Größe der Spalten ändert, und dass Sie sicherstellen müssen, dass Ihre "Hauptspalte" immer die längste ist. Stattdessen würde ich vorschlagen, dass Sie eine der drei robusteren Lösungen verwenden:

1. display: flex : bei weitem die einfachste und beste Lösung und sehr flexibel - wird aber von IE9 und älteren Versionen nicht unterstützt.
2. table o display: table Sehr einfach, sehr kompatibel (so ziemlich jeder Browser), sehr flexibel.
3. display: inline-block; width:50% mit einem negativen Rand-Hack: recht einfach, aber die Ränder am Spaltenende sind ein wenig knifflig.

1. display:flex

Das ist wirklich einfach und lässt sich leicht an komplexere oder detailliertere Layouts anpassen - allerdings wird Flexbox nur von IE10 oder höher unterstützt (zusätzlich zu anderen modernen Browsern).

Ejemplo: http://output.jsbin.com/hetunujuma/1

Relevante html:

<div class="parent"><div>column 1</div><div>column 2</div></div>

Relevantes css:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox bietet Unterstützung für viele weitere Optionen, aber um eine beliebige Anzahl von Spalten zu haben, reicht das oben genannte aus!

2. <table> o display: table

Ein einfacher und äußerst kompatibler Weg, dies zu tun, ist die Verwendung einer table - Ich empfehle Ihnen, das zuerst auszuprobieren, wenn Sie Old-IE-Unterstützung benötigen. . Sie haben es mit Spalten zu tun; Divs + Floats sind einfach nicht der beste Weg, um das zu tun (ganz zu schweigen von der Tatsache, dass mehrere Ebenen von verschachtelten Divs, nur um die CSS-Beschränkungen zu umgehen, kaum "semantischer" ist als die Verwendung einer einfachen Tabelle). Wenn Sie nicht die table Element, css berücksichtigen display: table (wird von IE7 und älteren Versionen nicht unterstützt).

Ejemplo: http://jsfiddle.net/emn13/7FFp3/

Relevante html: (aber erwägen Sie die Verwendung eines einfachen <table> stattdessen)

<div class="parent"><div>column 1</div><div>column 2</div></div>

Relevantes css:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

Dieser Ansatz ist weitaus robuster als die Verwendung von overflow:hidden mit Schwimmern. Sie können so ziemlich jede Anzahl von Spalten hinzufügen; Sie können sie automatische Skalierung wenn Sie wollen; und Sie behalten die Kompatibilität mit alten Browsern. Anders als bei der Float-Lösung müssen Sie auch nicht wissen im Vorfeld welche Spalte die längste ist; die Höhe ist gut skalierbar.

KISS: Verwenden Sie keine Float-Hacks, es sei denn, Sie brauchen sie ausdrücklich. Wenn IE7 ein Problem ist, würde ich immer noch eine einfache Tabelle mit semantischen Spalten gegenüber einer schwer zu wartenden, weniger flexiblen Trick-CSS-Lösung vorziehen.

Übrigens, wenn Ihr Layout responsiv sein soll (z. B. keine Spalten auf kleinen Handys), können Sie eine @media Abfrage, um bei kleinen Bildschirmbreiten auf ein einfaches Blocklayout zurückzugreifen - dies funktioniert unabhängig davon, ob Sie <table> oder jede andere display: table Element.

3. display:inline block mit einer negativen Marge hacken.

Eine andere Alternative ist die Verwendung von display:inline block .

Ejemplo: http://jsbin.com/ovuqes/2/edit

Relevante html: (das Fehlen von Leerzeichen zwischen den div Tags ist wichtig!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

Relevantes css:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

Dies ist etwas schwierig, und der negative Rand bedeutet, dass der "wahre" Boden der Spalten verdeckt wird. Das wiederum bedeutet, dass Sie nichts relativ zum unteren Rand dieser Spalten positionieren können, da dieser durch die folgenden Faktoren abgeschnitten wird overflow: hidden . Beachten Sie, dass Sie neben Inline-Blöcken auch mit Floats einen ähnlichen Effekt erzielen können.

---

TL;DR : verwenden flexbox wenn Sie IE9 und älter ignorieren können; andernfalls versuchen Sie es mit einer (css-)Tabelle. Wenn keine dieser Optionen für Sie funktioniert, gibt es Hacks für negative Ränder, aber diese können seltsame Anzeigeprobleme verursachen, die während der Entwicklung leicht zu übersehen sind, und es gibt Layout-Einschränkungen, die Sie beachten müssen.

Answer 3

Für die Eltern:

display: flex;

Für Kinder:

align-items: stretch;

Sie sollten einige Präfixe hinzufügen, prüfen Sie caniuse.

Answer 4

Ich habe viele Antworten gefunden, aber die wahrscheinlich beste Lösung für mich ist

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Andere Lösungen können Sie hier einsehen http://css-tricks.com/fluid-width-equal-height-columns/

Answer 5

Hat das Elternteil eine Größe? Wenn Sie die Höhe des Elternteils wie folgt festlegen.

div.parent { height: 300px };

Dann können Sie das Kind auf diese Weise auf die volle Höhe strecken.

div.child-right { height: 100% };

EDIT

Hier sehen Sie, wie Sie dies mit JavaScript erreichen können.