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:
[code]function $() {
var elements = new Array();
for (var i=0;i
de seu site, e após adicione também o seguinte código para que ele seja executado no carregamento da página:
[code]window.onload = function() {
BoxHeights.equalise('one','two','three','four');
}
[/code]
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:
[code]
[/code]
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:
[code]
A - Lorem ipsum dolor sit amet
B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/code]
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:
[code]$(document).ready(function(){
$('#equalize').equalHeights();
});
[/code]
[img]http://www.pinceladasdaweb.com.br/blog/uploads/colunas-mesma-altura/equal-height-columns.gif[/img]
Imagem retirada do site de Matthew James Taylor
[quote]Fonte: Pinceladas da Web[/quote]