How to force all <div> elements to have same height in the page?

Question

The following picture is my product show. I use Bootstrap 3.2and the whole page is within a <div class="col-xs-12"> element and you can see the dynamically generated html code at the bottom of the image.

My problem is that the product-container divs don't have same heights (look at the highlighted photo).

Is it possible to fix all heights as same which doesn't affect responsiveness?

Answer 1

A few lines of jQuery can solve this:

var maxHeight = 0;

$(".box").each(function () {
    if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
    }
});

$(".box").height(maxHeight);

(Replace .box with the class of the divs you want to equalize.)

Heres a quick jsfiddle to show how it works.