Advanced Search

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