Equal-height-boxen

Boxen innerhalb eines Elements per JS auf gleiche Höhe bringen.

In diesem Beispiel werden alle Elemente mit der Klasse .box beeinflusst, die innerhalb eines Elements mit der Klasse .container liegen.

function makeTeaserboxEqualHeight() {
    var boxes = document.querySelectorAll('.container .box');
    var maxHeight = 0;
    boxes.forEach(function(box) {
        var currentHeight = box.clientHeight;
        if (maxHeight < currentHeight) {
            maxHeight = currentHeight;
        }
    });
    boxes.forEach(function(box) {
        box.style.height = maxHeight + 'px';
    });
}
// Aufruf dann über:
document.addEventListener('DOMContentLoaded', function() {
    makeTeaserboxEqualHeight();
});

Eventuell könnte auch folgendes funktionieren (noch nicht getestet).

function makeTeaserboxEqualHeight() {
    let boxes = document.querySelectorAll('.container .box');
    let maxHeight = Math.max(...Array.from(boxes, box => box.clientHeight));
    boxes.forEach(box => box.style.height = maxHeight + 'px');
}
document.addEventListener('DOMContentLoaded', makeTeaserboxEqualHeight);