Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe

 <div Klasse="übergeordnetes Layout">
        <div Klasse="left"><p>links</p></div>
        <div Klasse="Mitte">
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
        </div>
        <div class="right"><p>richtig</p></div>
        <div Stil="clear: beide;">111111111111</div>
    </div>

.Elternteil{
    Position: relativ;
    Überlauf: versteckt;
    Farbe: #efefef;
}
.Center,
.links,
.Rechts {
    Box-Größe: Rahmenbox;
    schweben: links;
}
.Mitte {
    Hintergrundfarbe: #2ECC71;
    Breite: 60%;
}

.links {
    Breite: 20 %;
    Hintergrundfarbe: #1ABC9C;
}
.Rechts {
    Breite: 20 %;
    Hintergrundfarbe: #3498DB;
}
.links,
.Rechts,
.Mitte {
    Rand unten: -99999px;
    Polsterung unten: 99999px;
}

  <div Klasse="übergeordnetes Layout">
        <div Klasse="left"><p>links</p></div>
        <div Klasse="Mitte">
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
        </div>
        <div class="right"><p>richtig</p></div>
        <div Stil="clear: beide;">111111111111</div>
    </div>

    .Elternteil{
        Position: relativ;
        Anzeige: Tabelle;
        Farbe: #efefef;
    }
    .Center,
    .links,
    .Rechts {
        Box-Größe: Rahmenbox;
        Anzeige: Tabellenzelle
    }
    .Mitte {
        Hintergrundfarbe: #2ECC71;
        Breite: 60%;
    }

    .links {
        Breite: 20 %;
        Hintergrundfarbe: #1ABC9C;
    }
    .Rechts {
        Breite: 20 %;
        Hintergrundfarbe: #3498DB;
    }

    <div Klasse="übergeordnetes Layout">
        <div class="left"><p>links</p> </div>
        <div Klasse="Mitte">
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
        </div>
        <div class="right"><p>richtig</p></div>
    </div>

   .Elternteil{
        Position: absolut;
        Farbe: #efefef;
        Breite: 100 %;
        Höhe: 200px;
    }

    .links,
    .Rechts,
    .Mitte {
        Position: absolut;
        Box-Größe: Rahmenbox;
        oben: 0;
        unten: 0;
    }
    .Mitte {
        Hintergrundfarbe: #2ECC71;
        links: 200px;
        rechts: 300px;
    }

    .links {
        Breite: 200px;
        Hintergrundfarbe: #1ABC9C;
    }
    .Rechts {
        rechts:0;
        Breite: 300px;
        Hintergrundfarbe: #3498DB;
    }
  

.Elternteil{
    Anzeige: Flex;
    Farbe: #efefef;
    Breite: 100 %;
    Höhe: 200px;
}

.links,
.Rechts,
.Mitte {
    Box-Größe: Rahmenbox;
    biegen: 1;
}
.Mitte {
    Hintergrundfarbe: #2ECC71;
}
.links {
    Hintergrundfarbe: #1ABC9C;
}
.Rechts {
    Hintergrundfarbe: #3498DB;
}

<div Klasse="übergeordnetes Layout">
    <div class="left"><p>links</p> </div>
    <div Klasse="Mitte">
        <p>Ich bin der Inhalt im Mittelteil</p>
        <p>Ich bin der Inhalt im Mittelteil</p>
        <p>Ich bin der Inhalt im Mittelteil</p>
        <p>Ich bin der Inhalt im Mittelteil</p>
    </div>
    <div class="right"><p>richtig</p></div>
</div>

    .Elternteil{
        Anzeige: Raster;
        Farbe: #efefef;
        Breite: 100 %;
        Höhe: 200px;
        Rastervorlagenspalten: 1fr 1fr 1fr;
    }

    .links,
    .Rechts,
    .Mitte {
        Box-Größe: Rahmenbox;
    }
    .Mitte {
        Hintergrundfarbe: #2ECC71;
    }
    .links {
        Hintergrundfarbe: #1ABC9C;
    }
    .Rechts {
        Hintergrundfarbe: #3498DB;
    }

<div Klasse="übergeordnetes Layout">
    <div class="left"><p>links</p> </div>
    <div Klasse="Mitte">
        <p>Ich bin der Inhalt im Mittelteil</p>
        <p>Ich bin der Inhalt im Mittelteil</p>
        <p>Ich bin der Inhalt im Mittelteil</p>
        <p>Ich bin der Inhalt im Mittelteil</p>
    </div>
    <div class="right"><p>richtig</p></div>
</div>

    <div Klasse="übergeordnetes Layout">
        <div class="left"><p>links</p> </div>
        <div Klasse="Mitte">
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
            <p>Ich bin der Inhalt im Mittelteil</p>
        </div>
        <div class="right"><p>richtig</p></div>
    </div>

    .Elternteil{
        Überlauf: automatisch;
        Farbe: #efefef;
    }
    .links,
    .Rechts,
    .Mitte {
        schweben: links;
    }
    .Mitte {
        Breite: 60%;
        Hintergrundfarbe: #2ECC71;
    }
    .links {
        Breite: 20 %;
        Hintergrundfarbe: #1ABC9C;
    }
    .Rechts {
        Breite: 20 %;
        Hintergrundfarbe: #3498DB;
    }

     // Höhe des höchsten Elements abrufen var nodeList = document.querySelectorAll(".parent > div");
    var arr = [].slice.call(nodeList,0);
    var maxHeight = arr.map(Funktion(Element){
        gibt item.offsetHeight zurück
    }).sort(Funktion(a, b){
        gib a - b zurück;
    }).Pop();
    arr.map(Funktion(Element){
        wenn(item.offsetHeight < maxHeight) {
            item.style.height = maxHeight + "px";
        }
    });