CSS - Erweitern Sie die Float-Child-DIV-Höhe auf die Parent-Höhe

Ich habe die Seitenstruktur wie folgt:

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

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

Jetzt hat der child-leftDIV mehr Inhalt, sodass die parentGröße des DIV gemäß dem untergeordneten DIV zunimmt.

Das Problem ist jedoch, dass die child-rightHöhe nicht zunimmt. Wie kann ich seine Höhe an die des Elternteils anpassen?

Fügen Sie für das parentElement die folgenden Eigenschaften hinzu:

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

dann für .child-rightdiese:

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

Detailliertere Ergebnisse mit CSS-Beispielen finden Sie hier und weitere Informationen zu Spalten gleicher Höhe finden Sie hier .

Eine übliche Lösung für dieses Problem verwendet die absolute Positionierung oder zugeschnittene Floats. Diese sind jedoch insofern schwierig, als sie eine umfassende Optimierung erfordern, wenn sich Ihre Spalten in Anzahl + Größe ändern, und dass Sie sicherstellen müssen, dass Ihre "Hauptsäule" immer die längste ist. Stattdessen würde ich vorschlagen, dass Sie eine von drei robusteren Lösungen verwenden:

1. display: flex: bei weitem die einfachste und beste Lösung und sehr flexibel - aber von IE9 und älter nicht unterstützt.
2. tableoder display: table: sehr einfach, sehr kompatibel (so ziemlich jeder Browser), ziemlich flexibel.
3. display: inline-block; width:50% mit einem negativen Rand-Hack: recht einfach, aber die Ränder am unteren Ende der Spalte sind etwas knifflig.

1. display:flex

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

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

Relevantes HTML:

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

Relevante CSS:

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

Flexbox unterstützt viel mehr Optionen, aber um einfach eine beliebige Anzahl von Spalten zu haben, reicht das oben Genannte aus!

2. <table>oderdisplay: table

Eine einfache und äußerst kompatible Möglichkeit, dies zu tun, ist die Verwendung von a table- ich würde empfehlen, dass Sie dies zuerst versuchen, wenn Sie Unterstützung für alte IE benötigen . Sie haben es mit Spalten zu tun; divs + floats sind einfach nicht der beste Weg, dies zu tun (ganz zu schweigen von der Tatsache, dass mehrere Ebenen verschachtelter divs, nur um CSS-Einschränkungen zu umgehen, kaum "semantischer" sind als nur die Verwendung einer einfachen Tabelle). Wenn Sie das tableElement nicht verwenden möchten , ziehen Sie CSS in Betrachtdisplay: table (von IE7 und älter nicht unterstützt).

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

Relevantes HTML: (aber erwägen Sie<table>stattdessen dieVerwendung einer Ebene)

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

Relevante 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 overflow:hiddenmit Floats. Sie können so ziemlich eine beliebige Anzahl von Spalten hinzufügen. Sie können sie automatisch skalieren lassen, wenn Sie möchten. und Sie behalten die Kompatibilität mit alten Browsern. Im Gegensatz zur Float-Lösung müssen Sie auch nicht vorher wissen, welche Spalte am längsten ist. Die Höhe skaliert ganz gut.

KISS: Verwenden Sie keine Float-Hacks, es sei denn, Sie müssen dies ausdrücklich tun. Wenn IE7 ein Problem darstellt, würde ich jeden Tag eine einfache Tabelle mit semantischen Spalten über einer schwer zu wartenden, weniger flexiblen Trick-CSS-Lösung auswählen.

Übrigens, wenn Sie möchten, dass Ihr Layout reagiert (z. B. keine Spalten auf kleinen Mobiltelefonen), können Sie mithilfe einer @mediaAbfrage auf das einfache Blocklayout für kleine Bildschirmbreiten zurückgreifen - dies funktioniert unabhängig davon, ob Sie es verwenden <table>oder nichtdisplay: table Element verwenden.

3. display:inline blockmit einem negativen Margin Hack.

Eine andere Alternative ist zu verwenden display:inline block.

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

Relevantes HTML: (Das Fehlen von Leerzeichen zwischen dendivTags ist signifikant!)

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

Relevante 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 ist. Dies bedeutet wiederum, dass Sie nichts relativ zum unteren Rand dieser Spalten positionieren können, da dies durch abgeschnitten wird overflow: hidden. Beachten Sie, dass Sie zusätzlich zu Inline-Blöcken mit Floats einen ähnlichen Effekt erzielen können.

TL; DR : Verwenden Sie 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 mit negativen Margen, die jedoch zu seltsamen Anzeigeproblemen führen können, die während der Entwicklung leicht übersehen werden können, und es gibt Layoutbeschränkungen, die Sie beachten müssen.

Für die Eltern:

display: flex;

Für Kinder:

align-items: stretch;

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

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

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

Sie können andere Lösungen hier überprüfen http://css-tricks.com/fluid-width-equal-height-columns/

Bitte setzen Sie parent div auf, overflow: hidden
dann können Sie in child divs einen großen Betrag für padding-bottom einstellen. Zum Beispiel werden
padding-bottom: 5000px
dann margin-bottom: -5000px
und dann alle untergeordneten Divs die Größe des Elternteils sein.
Dies funktioniert natürlich nicht, wenn Sie versuchen, Inhalte in das übergeordnete Div einzufügen (dh außerhalb anderer Divs).

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

Beispiel: http://jsfiddle.net/Tareqdhk/DAFEC/

Hat der Elternteil eine Größe? Wenn Sie die Größe der Eltern so einstellen.

div.parent { height: 300px };

Dann können Sie das Kind so auf die volle Höhe strecken lassen.

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

BEARBEITEN

So würden Sie es mit JavaScript machen.

Die Anzeige von CSS-Tabellen ist dafür ideal:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Ursprüngliche Antwort (vorausgesetzt, jede Spalte könnte größer sein):

Sie versuchen, die Größe der Eltern von der Größe der Kinder und die Größe der Kinder von der Größe der Eltern abhängig zu machen. Wird nicht berechnet. CSS Faux-Spalten sind die beste Lösung. Es gibt mehr als einen Weg, dies zu tun. Ich würde lieber kein JavaScript verwenden.

Ich habe dies kürzlich auf meiner Website mit jQuery getan. Der Code berechnet die Höhe des höchsten Divs und setzt die anderen Divs auf die gleiche Höhe. Hier ist die Technik:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

Ich glaube nicht, dass height:100%es funktionieren wird. Wenn Sie also die Div-Höhen nicht explizit kennen, gibt es meiner Meinung nach keine reine CSS-Lösung.

Ich habe dies für einen Kommentarbereich verwendet:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Sie könnten das Kind rechts nach rechts schweben lassen, aber in diesem Fall habe ich die Breiten jedes Div genau berechnet.

Wenn Sie Bootstrap kennen, können Sie dies einfach mithilfe der Eigenschaft 'flex' tun. Sie müssen lediglich die folgenden CSS-Eigenschaften an das übergeordnete div übergeben

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

wo .homepageSectionist mein eltern div. Fügen Sie nun untergeordnetes div in Ihr HTML als

<div class="abc col-md-6">
<div class="abc col-md-6">

Dabei ist abc mein Kind div. Sie können die Gleichheit der Körpergröße in beiden Kindern unabhängig von der Grenze überprüfen, indem Sie dem Kind div eine Grenze geben

<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 geben.

Ich habe in einem Praktikumsinterview von diesem tollen Trick erfahren. Die ursprüngliche Frage lautet, wie Sie sicherstellen können, dass die Höhe jeder oberen Komponente in drei Spalten dieselbe Höhe hat, in der der gesamte verfügbare Inhalt angezeigt wird. Erstellen Sie grundsätzlich eine unsichtbare untergeordnete Komponente, die die maximal mögliche Höhe darstellt.

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