Colunas com alturas iguais com JavaScript
Postado por: Pedro Rogério em
Imagem retirada do site de Matthew James Taylor
Quem já não passou pelo problema de que as colunas do site não acompamhavam o tamanho das outras colunas e assim acarretando algumas vezes “quebras de layout”? Pois bem, já postei aqui uma solução não muito bem aceita utilizando CSS, mas dessa vez vamos implementar uma solução com JavaScript e uma outra com a utilização do Framework jQuery.
A primeira solução que utiliza JavaScript puro foi desenvolvida por Matthew Pennell, e o código e sua utilização consistem da seguinte forma. Primeiro você irá precisar de uma função para capturar os elementos da página:
function $() {
var elements = new Array();
for (var i=0;i<arguments .length;i++) {
var element = arguments[i];
if (typeof element == 'string') element = document.getElementById(element);
if (arguments.length == 1) return element;
elements.push(element);
}
return elements;
}
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;
}
}
Sua utilização é muito simples, adicione o código acima dentro das tags <head></head> de seu site, e após adicione também o seguinte código para que ele seja executado no carregamento da página:
window.onload = function() {
BoxHeights.equalise('one','two','three','four');
}
Dentro da função equalise você deve adicionar os “ids” das divs que deseja igualar a altura. O código final então ficaria da seguinte forma:
<script type="text/javascript">
function $() {
var elements = new Array();
for (var i=0;i<arguments .length;i++) {
var element = arguments[i];
if (typeof element == 'string') element = document.getElementById(element);
if (arguments.length == 1) return element;
elements.push(element);
}
return elements;
}
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;
}
}
window.onload = function() {
BoxHeights.equalise('one','two','three','four');
}
</script>
A segunda solução utiliza um plugin para jquery criado pelo blog Filament Group. Sua utilização é bem mais simples, onde dependeremos do jQuery e do plugin EqualHeights. Observe a seguinte estrutura HTML:
<div id="equalize">
<div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
<div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="box"><p>C</p></div>
<div class="box"><p>D - Ut enim ad minim</p></div>
</div>
Basta agora você efetuar uma chamada da div pai para o plugin que todas as divs filhas terão a mesma altura, da seguinte forma:
$(document).ready(function(){
$('#equalize').equalHeights();
});
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Muito bom mesmo esse post.
Hoje mesmo estava precisando de alinhar minhas colunas e acordei ja com esse post.
Quebrou meu galho, muito bom mesmo teste nos IEs, firefox e Chrome e funciono perfeitamente.
Espero que ajude mais gente. Parabéns.
Não seria mais simples colocar um background de 1 px de altura na div#equalize com as cores corretamente posicionadas?
E sem JS o layout vai pras cucuias…
Não gostei, melhor o hack do CSSBlog.ES ou, melhor ainda, a solução que o MJT apresenta no post do qual você tirou a imagem. Ambos funcionam sem JS.
Oq eu keria mesmo era uma forma de colocar sidebars normalmente no blog, e abaixo dos sidebars, depois das widgets acabarem, a coluna #content ter seu width expandido pra ocupar toda a largura do browser, evitando desperdiçar o espaço das sidebars.
Mas acredito q isso é impossível, pq a #content deixaria de ser um retângulo… Precisaria fechar ela logo depois das sidebars acabarem e abrir uma outra pra continuar exibindo os posts, e isso feito dinamicamente em realtime no client-side, pq só no browser é possível ter certeza absoluta do height das sidebars (ele pode bloquear banners por exemplo)…
Só divagando antes de ir dormir :P
Massa!
Mas por otimização de recursos no cliente, acabo preferindo aquelas colunas perfeitas com CSS.
Do Matthew James Taylor também: http://matthewjamestaylor.com/blog/perfect-3-column.htm
[...] Read the original here: Colunas com alturas iguais com JavaScript » Pinceladas da Web – XHTML, CSS, JavaScript e WebStandar… [...]