it-swarm.com.de

CSS - Erweitern Sie die DIV-Höhe von float child auf die Höhe der Eltern

Ich habe die Seitenstruktur als:

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

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

Jetzt hat der _child-left_ DIV mehr Inhalt, sodass die Größe des parent DIV mit dem untergeordneten DIV zunimmt.

Das Problem ist jedoch, dass die Höhe von _child-right_ nicht zunimmt. Wie kann ich seine Höhe dem übergeordneten Element angleichen?

419
Veera

Fügen Sie für das parent -Element 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;
}

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

430
Sotiris

Eine gängige Lösung für dieses Problem sind absolute Positionierungen oder abgeschnittene Gleitkommazahlen. Diese sind jedoch insofern schwierig, als umfangreiche Optimierungen erforderlich sind, wenn sich die Anzahl und Größe Ihrer Spalten ändert und Sie sicherstellen müssen, dass Ihre "Haupt" -Spalte immer die längste ist. Stattdessen würde ich vorschlagen, dass Sie eine von drei robusteren Lösungen verwenden:

  1. display: flex: mit Abstand die einfachste und beste Lösung und sehr flexibel - wird jedoch von IE9 und älteren Versionen nicht unterstützt.
  2. table oder display: table: sehr einfach, sehr kompatibel (so ziemlich jeder Browser), ziemlich flexibel.
  3. display: inline-block; width:50% mit negativem Margin-Hack: Ganz einfach, aber die unteren Spaltengrenzen sind etwas knifflig.

1. display:flex

Dies ist wirklich einfach und kann leicht an komplexere oder detailliertere Layouts angepasst werden. 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>

Relevantes 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> oder display: table

Ein einfacher und äußerst kompatibler Weg, dies zu tun, ist die Verwendung eines table - ). Ich würde empfehlen, dass Sie dies zuerst versuchen, wenn Sie Unterstützung für alten 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 die Verwendung einer einfachen Tabelle). Wenn Sie das table -Element nicht verwenden möchten, berücksichtigen Sie css display: table (wird von IE7 und älteren Versionen nicht unterstützt).

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

Relevantes HTML: (aber verwenden Sie stattdessen einen einfachen <table>)

<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 Floats. Sie können so ziemlich beliebig viele Spalten hinzufügen. Sie können sie automatisch skalieren lassen , wenn Sie möchten; und Sie behalten die Kompatibilität mit alten Browsern. Anders als es die Float-Lösung erfordert, 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 es ausdrücklich. Wenn IE7 ein Problem ist, würde ich trotzdem jeden Tag eine einfache Tabelle mit semantischen Spalten über eine schwer zu pflegende, weniger flexible Trick-CSS-Lösung auswählen.

Übrigens, wenn Sie möchten, dass Ihr Layout anspricht (z. B. keine Spalten auf kleinen Mobiltelefonen), können Sie mit der Abfrage @media auf das einfache Blocklayout für kleine Bildschirmbreiten zurückgreifen. Dies funktioniert unabhängig davon, ob Sie <table> oder ein anderes display: table Element.

3. display:inline block mit einem negativen Margin-Hack.

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

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

Relevantes HTML: (das Fehlen von Leerzeichen zwischen den div -Tags ist signifikant!)

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


TL; DR : Verwenden Sie flexbox , wenn Sie IE9 und ältere Versionen ignorieren können. Andernfalls versuchen Sie es mit einer (CSS) -Tabelle. Wenn keine dieser Optionen für Sie funktioniert, gibt es negative Margin-Hacks, 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.

187
Eamon Nerbonne

Für die Eltern:

display: flex;

Für Kinder:

align-items: stretch;

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

23
Aiphee

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/

18

Bitte setze parent div auf overflow: hidden
Dann können Sie in Kinderteilen einen großen Betrag für das Auffüllen des Bodens einstellen. zum Beispiel
padding-bottom: 5000px
dann margin-bottom: -5000px
und dann werden alle untergeordneten Divs die Größe der Eltern sein.
Natürlich funktioniert dies nicht, wenn Sie versuchen, Inhalte in das übergeordnete div zu setzen (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/

11
Tareq

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

div.parent { height: 300px };

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

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

EDIT

So würden Sie es mit JavaScript machen.

8
Olical

Dafür ist die CSS-Tabellendarstellung 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 (angenommen, jede Spalte könnte höher 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 ist die beste Lösung. Dafür gibt es mehr als einen Weg. Ich würde lieber kein JavaScript verwenden.

5
Salman A

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 nach rechts schweben lassen, aber in diesem Fall habe ich die Breiten der einzelnen Divs genau berechnet.

4
larsgrafik

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 dieselbe 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% funktioniert. Wenn Sie also die Div-Höhen nicht explizit kennen, gibt es meiner Meinung nach keine reine CSS-Lösung.

4
ajcw

Wenn Sie bootstrap kennen, können Sie dies einfach mit 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 .homepageSection ist mein Elternteil div. Fügen Sie nun child div in Ihrem HTML als hinzu

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

wobei ABC mein Kind ist. Sie können die Gleichheit der Größe in beiden Kinderteilen unabhängig von der Grenze überprüfen, indem Sie dem Kinderteil die Grenze geben

3
Er.Naved Ali
<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 Inline-Stil verwendet, um eine Idee zu geben.

0
suketup