Question

So I’m using some jQuery that I found online. There’s a lot of variations of it that all do the same thing to help you create divs of equal height. The code I’m using is like so when I load a page.

    var highestCol = Math.max($('.equal_height_div1').height(),$('.equal_height_div2').height());
$('.equal_height').css('min-height', highestCol);

Works like a charm.

To get this to work when resizing the browser window, I re-use the same code from above but just put it inside the resize function:

    $(window).resize(function() {
var highestCol = Math.max($('.equal_height_div1').height(),$('.equal_height_div2').height());
$('.equal_height').css('min-height', highestCol);
});

Here’s the challenge: I’m using the 1140grid with responsive layout (http://cssgrid.net/). It resizes divs as you resize the window. So my divs are shrinking in width and the 2nd set of code above works great when the window resizes.

The problem I’m having and would love insight from anyone is how do I destroy the value of the min height on page resize, then run the function again to get the new min-height from the tallest div? The problem is that once the div becomes tall and I resize the window to be wider, the div needs to decrease in height but it is staying with the highest div min-height it reached. This will allow me to constantly update the min-height of the div with a new value and re-calcuate the actual height of the largest div.

Answer 1

Unset the min-height so that the div gets height gets recalculated.

$('document').ready(function(){

    var $equal_height = $('.equal_height'),
        $col_a = $('.equal_height_div1');
        $col_b = $('.equal_height_div2');

    // calc the highest column
    // we assign this the return value of a function to make sure its always fresh.
    var heighest = function($col_a, $col_b){
        // Cache variables in closure
        var $col_a, $col_b;
        // this is where the magic happens
        return function(){    
            return Math.max( $col_a.height(), $col_b.height() );
        }
    }($col_a, $col_b);

    // Run once on ready to equalize columns
    $equal_height.css('minHeight', heighest);

    $(window).resize(function(){
       // By unsetting minHeight the column gets its real size back 
       $equal_height.css('minHeight', 0)
            .css('minHeight', heighest);
    });  

});