Posted By

o0110o on 12/06/13

Tagged

Versions (?)

Last Edited at 12/06/13 02:46am

Statistics

Viewed 1015 times

Favorited by 1 user(s)

Related snippets

Rock-Solid Equal Height Columns

/ Published in: JavaScript

Dynamic equal height columns that account for padding and borders.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

//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'); }