Return to Snippet

Revision: 65482
at December 6, 2013 02:46 by o0110o


Initial Code
//Dynamic Equal Height Columns *Pure JS
function eqHeight(parent_id) {
	var child = document.getElementById(parent_id).childNodes, childAmount = child.length, boxHeight = 0;
    // Find the greatest height
	for(var i = childAmount - 1; i >= 0; i--) { 	
        if(child[i].offsetHeight && child[i].offsetHeight > boxHeight) {
            child[i].style.height = '';
            boxHeight = child[i].offsetHeight;
        }
	}
	// Apply the greatest height to all child elements while accounting for padding and borders
	for(var i = childAmount - 1; i >= 0; i--) { 	
		if(child[i].offsetHeight) {
			child[i].style.height = boxHeight + 'px';
		}
        if(child[i].offsetHeight > boxHeight) {
            child[i].style.height = boxHeight - (child[i].offsetHeight - child[i].clientHeight) + 'px';
            child[i].style.height = boxHeight - ((child[i].offsetHeight - boxHeight) + (child[i].offsetHeight - child[i].clientHeight)) + 'px';
        }
	}
}
window.onload = function() { eqHeight('object_group'); }
window.onresize = function() { eqHeight('object_group'); }

Initial URL
http://jsfiddle.net/LmbmR/13/

Initial Description
Dynamic equal height columns that account for padding and borders.

Initial Title
Rock-Solid Equal Height Columns

Initial Tags
javascript, style

Initial Language
JavaScript