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

Bitte setzen Sie das übergeordnete Div auf overflow: hidden
dann können Sie in untergeordneten Divs einen großen Betrag für padding-bottom festlegen. zum Beispiel
padding-bottom: 5000px
dann margin-bottom: -5000px
und dann alle Kind-Divs wird die Höhe des übergeordneten sein.
Natürlich wird dies nicht funktionieren, wenn Sie versuchen, Inhalte in der übergeordneten div (außerhalb anderer divs, die ist) setzen

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

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

Answer 2

Die CSS-Tabellendarstellung 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 (in der Annahme, dass jede Säule höher sein könnte):

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. Das wird nicht funktionieren. CSS Faux columns ist die beste Lösung. Es gibt mehr als eine Möglichkeit, das zu tun. Ich würde lieber kein JavaScript verwenden.

Answer 3

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>

Man könnte die untergeordnete rechte Seite nach rechts verschieben, aber in diesem Fall habe ich die Breiten der einzelnen Divs genau berechnet.

Answer 4

Ich habe dies kürzlich auf meiner Website mit jQuery gemacht. 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% wird funktionieren, also wenn Sie nicht explizit wissen, die div Höhen Ich glaube nicht, es ist eine reine CSS-Lösung.

Answer 5

Wenn Sie sich mit Bootstrap auskennen, können Sie es leicht tun, indem Sie die Eigenschaft "flex" verwenden.

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

donde .homepageSection ist mein übergeordnetes Div. Jetzt fügen Sie Kind div in Ihrem html als

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

Sie können die Gleichheit der Höhe in beiden Child-Divs unabhängig vom Rahmen überprüfen, indem Sie dem Child-Div einen Rahmen geben.