Columnas de igual altura con jQuery

Cuando se utiliza una tabla, todas las columnas de la tabla tienen la misma altura. Durante los días de principios de diseño de páginas web, todo el mundo el uso de tablas al estilo de sus páginas web para la creación de columnas de la misma altura no fueron un problema en absoluto. Pero con el aumento de la CSS, las cosas cambiaron y ahora, la creación de columnas de igual altura no es un trabajo fácil.

Happilly, aquí hay un verdadero salvavidas para todo el mundo que quieren crear columnas idénticas.

Dado que este código se utiliza el marco de jQuery, asegúrese de que tiene instalado en su sitio web!
Pegue la siguiente secuencia de comandos en un archivo nuevo y lo incluya en su página web:

1
2
3
4
5
6
7
8
9
10
11
12
13

$.fn.equalHeights = function(px) {
	$(this).each(function(){
		var currentTallest = 0;
		$(this).children().each(function(i){
			if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
		});
		if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
		// for ie6, set height since min-height isn't supported
		if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
		$(this).children().css({'min-height': currentTallest});
	});
	return this;
};

Utilice este código para los elementos que quiera que tengan la misma altura.

1

$('.container').equalHeights();

Ver detalles