Newsmade
Java script e Ajax sem lero lero
Voltar

Colunas com alturas iguais em CSS

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();
});


[img][/img]
Imagem retirada do site de Matthew James Taylor

Fonte: Pinceladas da Web
Postado 28/05/2009 21:44 por Jeison Frasson

© 2002-2012 Newsmade - Quase todos os direitos reservados.