Estou aqui desta vez para falar-lhes sobre um problema que me ocorre muito e após descobrir este código tive minha vida facilitada! Em suma esse código irá comparar o tamanho de todos as colunas indicadas e fará com que elas se tornem do mesmo tamanho, usando como base a maior.
Vamos a parte prática para não perder tempo, primeiramente você deve criar um arquivo equalizar.js e colocar o seguinte código:
var BoxHeights = {
maxh: 0,
boxes: Array(),
num: 0,
equalise: function() {
this.num = arguments.length;
for (var i=0;i<this.num;i++) if (!$(arguments[i])) return;
this.boxes = arguments;
this.maxheight();
for (var i=0;i<this.num;i++) $(arguments[i]).style.height = this.maxh+"px";
},
maxheight: function() {
var heights = new Array();
for (var i=0;i<this.num;i++) {
if (navigator.userAgent.toLowerCase().indexOf('opera') == -1) {
heights.push($(this.boxes[i]).scrollHeight);
} else {
heights.push($(this.boxes[i]).offsetHeight);
}
}
heights.sort(this.sortNumeric);
this.maxh = heights[this.num-1];
},
sortNumeric: function(f,s) {
return f-s;
}
}Após isso feito salve e faça com que a sua página principal puxe o arquivo dentro do cabeçalho[tag <head>], da seguinte forma:
<script src="http://seusite.com/caminho/para/o/arquivo/equalizar.js" type="text/javascript"></script>
Agora temos que escolher as colunas que desejamos equalizar, quando isso tiver sido feito adicione o seguinte código dentro de seu cabeçalho [tag <head>]:
<script type="text/javascript"> window.onload = function() {
BoxHeights.equalise('um','dois','tres','quatro');
} </script>Após feito isso seja feliz, e pare de ter problemas com tamanho das colunas. Você pode ver um exemplo deste código funcionando nessa página.