Cuantas veces nos complicamos con nuestras hojas de estilo con algo tan simple como igualar el alto de distintas columnas, algo que parece muy simple en la practica se torna complicado y más si tenemos en cuenta el problema de compatibilidad entre los distintos navegadores.
Para igualar el alto de distintas columnas de manera sencilla podemos utilizar jQuery, en especial tenemos disponible jQuery Equal Columns, un plugin que no tiene más de 15 lineas de código que iguala el alto de las columnas tomando de referencia la columnas de mayor alto.
El plugin es el siguiente:
jQuery.fn.equalCols = function(){
//Array Sorter
var sortNumber = function(a,b){return b - a;};
var heights = [];
//Push each height into an array
$(this).each(function(){
heights.push($(this).height());
});
heights.sort(sortNumber);
var maxHeight = heights[0];
return this.each(function(){
//Set each column to the max height
$(this).css({'height': maxHeight});
});
};
Y su implementación es igual de sencilla:
jQuery(function($){
$('#col1,#col2,#col3').equalCols();
});
En donde #col1,#col2,#col3 son los identificadores de las columnas.
Simple verdad?
Web y código del plugin: jQuery Equal Columns