jQuery - Elementen dezelfde hoogte geven


Met deze code kun je er op een eenvoudige manier voor zorgen dat bijvoorbeeld drie div's die naast elkaar staan altijd dezelfde hoogte krijgen. Dit is een resultaat wat voorheen vaak werd bereikt door gebruik te maken van tabellen. Zorg dat op basis van de onderstaande code de betreffende div's dan de classnaam 'column' toegewezen krijgen.

$(document).ready(function() {
        var colheight = 0;
        $("div.column").each(function(){
                if ($(this).height() > colheight) {
                        colheight = $(this).height();
                }
        });
        $("div.column").height(colheight);
});


Op dezelfde manier kun je ook met min-height werken als dit de voorkeur heeft.

$(document).ready(function() {
        var colheight = 0;
        $("div.column").each(function(){
                if ($(this).height() > colheight) {
                        colheight = $(this).height();
                }
        });
        $("div.column").css('min-height', colheight);
});


Een kortere versie van de eerste code.

$(document).ready(function() {
        var colHeight = Math.max($('#element1').height(),$('#element2').height());
        $('.elements').height(colHeight);
});