Equal height divs (or li) in rows with fluid width and height

Question

I found this sweet jQuery snippet by CSS-Tricks' Chris Coyier that resets div elements heights that share the same top position on the page (are on the same row) to the tallest element.

The Problem

This solution almost works with fluid width layouts and resets height when top positions changes but it resets it to the original height of the current tallest element in the row when the page first loaded. This is an issue because the height of the tallest element might have changed since this page first loaded because of the use of relative units like ems or because of word wrapping with paragraphs.

Proposed Solution

The solution would be to have the row's elements' height being set to the tallest element's current height, not the original height. I have been unsuccessful in accomplishing this.

Here is the snippet where "li.half" is the elements being compared and resized.

jQuery(document).ready(function($) {
// these are (ruh-roh) globals. You could wrap in an
    // immediately-Invoked Function Expression (IIFE) if you wanted to...
    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array();
    
    function setConformingHeight(el, newHeight) {
        // set the height to something new, but remember the original height in case things change
        el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
        el.height(newHeight);
    }
    
    function getOriginalHeight(el) {
        // if the height has changed, send the originalHeight
        return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
    }
    
    function columnConform() {
    
        // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
        $('li.half').each(function() {
        
            // "caching"
            var $el = $(this);
            
            var topPosition = $el.position().top;
    
            if (currentRowStart != topPosition) {
    
                // we just came to a new row.  Set all the heights on the completed row
                for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
    
                // set the variables for the new row
                rowDivs.length = 0; // empty the array
                currentRowStart = topPosition;
                currentTallest = getOriginalHeight($el);
                rowDivs.push($el);
    
            } else {
    
                // another div on the current row.  Add it to the list and check if it's taller
                rowDivs.push($el);
                currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);
    
            }
            // do the last row
            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
    
        });
    }
    
    
    $(window).resize(function(){
        columnConform();
    });
    
    // Dom Ready
    // You might also want to wait until window.onload if images are the things that
    // are unequalizing the blocks
    $(function() {
        columnConform();
    });
});

Please let me know if you can figure out how to make the setConformingHeight adjust on window resize.

Answer 1

Those solutions didn't work on window.resize() as elements height should be unlocked with $el.height('auto') before calculating new real height.

Here is my solution :

var currentRowTop = -100, currentHighest=  0;

$('.page-wrapper .cc').each(function() {
    $el=$(this);
    if($el.position().top!=currentRowTop){
        equalizeHeight();
        currentRowTop = $el.position().top; 
        $el.height('auto').addClass('same-height');
        currentHighest=$el.height();
    }else{
        $el.height('auto').addClass('same-height');
        currentHighest = ($el.height()>currentHighest) ? $el.height() : currentHighest ;
    }
});
equalizeHeight();   

function equalizeHeight(){
    if($('.same-height').size()==0) return;
    $('.same-height').height(currentHighest).removeClass('same-height');
}