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 maxHeight = 0;
    jQuery('.container .box').each(function(){
        var currentHeight = $(this).height();
        if(maxHeight < currentHeight) {
            maxHeight = currentHeight;
        }
    });
    jQuery('.container .box').css('height', maxHeight);
}

Das ganze als Vanilla JS ohne jQuery:

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 zB über:

document.addEventListener('DOMContentLoaded', function() {
    makeTeaserboxEqualHeight();
});