Temos recebido alguns pedidos de ajuda sobre como pôr as barras laterais do blog com a mesma altura da área dos posts. Neste post vou mostrar um script que vai responder a estes pedidos:
| Template 2 colunas |
Template 3 colunas |
||
| Antes | Depois |
Antes |
Depois |
Esta alteração não pode ser feita só com css porque a altura da área de post está dependente do conteúdo dos posts. A solução é escrever um script que vê a altura máxima da área de posts para depois alterar a altura da barra lateral.
Para pôr o script a funcionar:
Este script foi adaptado de um artigo publicado no site www.devarticles.com. Aqui podem encontrar uma explicação mais detalhada do funcionamento do script.
<script type="text/javascript">
matchHeight=function(){
var divs,contDivs,maxHeight,divHeight,d;
var div_extra,div_extrab,div_posts;
/* <div> a redimensionar */
div_extras=document.getElementById('extras');
div_extrasb=document.getElementById('extrasB');
div_posts=document.getElementById('posts');
divs=[div_extras,div_extrasb,div_posts];
contDivs=[];
/* altura maxima */
maxHeight=0;
/* procura altura maxima dos <div> */
for(var i=0;i<divs.length;i++){
d=divs[i];
if (d) {
contDivs[contDivs.length]=d;
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
maxHeight=Math.max(maxHeight,divHeight);
}
}
/* redimensiona os <div> */
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight+"px";
}
}
/* Executa o script */
window.onload=function(){
if(document.getElementById){
matchHeight();
}
}
</script>
Para pôr o script a funcionar:
- Copiar o código do script para um componente (Personalização intermédia > Componentes).
- Activar o componente na barra lateral (Personalização intermédia > Posições).
- Gravar as alterações.
Este script foi adaptado de um artigo publicado no site www.devarticles.com. Aqui podem encontrar uma explicação mais detalhada do funcionamento do script.
Lançada
