Saltar para: Post [1], Comentários [2], Pesquisa e Arquivos [3]

A Equipa

O blog da equipa que mantém o SAPO Blogs. Deixe a sua dúvida ou sugestão nos comentários de qualquer post.

A Equipa

O blog da equipa que mantém o SAPO Blogs. Deixe a sua dúvida ou sugestão nos comentários de qualquer post.

Como pôr a barra lateral com a mesma altura da área de posts?

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.

<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:
  1. Copiar o código do script para um componente (Personalização intermédia > Componentes).
  2. Activar o componente na barra lateral (Personalização intermédia > Posições).
  3. Gravar as alterações.
O script funciona com todos os templates que tenham uma ou duas barras laterais.

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.
 

38 comentários

Comentar post

Arquivo

  1. 2018
  2. J
  3. F
  4. M
  5. A
  6. M
  7. J
  8. J
  9. A
  10. S
  11. O
  12. N
  13. D
  14. 2017
  15. J
  16. F
  17. M
  18. A
  19. M
  20. J
  21. J
  22. A
  23. S
  24. O
  25. N
  26. D
  27. 2016
  28. J
  29. F
  30. M
  31. A
  32. M
  33. J
  34. J
  35. A
  36. S
  37. O
  38. N
  39. D
  40. 2015
  41. J
  42. F
  43. M
  44. A
  45. M
  46. J
  47. J
  48. A
  49. S
  50. O
  51. N
  52. D
  53. 2014
  54. J
  55. F
  56. M
  57. A
  58. M
  59. J
  60. J
  61. A
  62. S
  63. O
  64. N
  65. D
  66. 2013
  67. J
  68. F
  69. M
  70. A
  71. M
  72. J
  73. J
  74. A
  75. S
  76. O
  77. N
  78. D
  79. 2012
  80. J
  81. F
  82. M
  83. A
  84. M
  85. J
  86. J
  87. A
  88. S
  89. O
  90. N
  91. D
  92. 2011
  93. J
  94. F
  95. M
  96. A
  97. M
  98. J
  99. J
  100. A
  101. S
  102. O
  103. N
  104. D
  105. 2010
  106. J
  107. F
  108. M
  109. A
  110. M
  111. J
  112. J
  113. A
  114. S
  115. O
  116. N
  117. D
  118. 2009
  119. J
  120. F
  121. M
  122. A
  123. M
  124. J
  125. J
  126. A
  127. S
  128. O
  129. N
  130. D
  131. 2008
  132. J
  133. F
  134. M
  135. A
  136. M
  137. J
  138. J
  139. A
  140. S
  141. O
  142. N
  143. D
  144. 2007
  145. J
  146. F
  147. M
  148. A
  149. M
  150. J
  151. J
  152. A
  153. S
  154. O
  155. N
  156. D
  157. 2006
  158. J
  159. F
  160. M
  161. A
  162. M
  163. J
  164. J
  165. A
  166. S
  167. O
  168. N
  169. D

Subscrever por e-mail

A subscrição é anónima e gera, no máximo, um e-mail por dia.