jQuery para ajustar a altura de elementos HTML

jQuery para ajustar a altura de elementos HTML

Em várias vezes que precisei ajustar a altura de elementos HTML cujo conteúdo é variável, reescrevia um código javascript utilizando jQuery para comparar a altura dos elementos e encontrar o maior valor, depois definia esse valor para a altura de todos os elementos. Embora seja simples, a cada vez tinha que refazer o código. Para tornar a operação mais simples, escrevi uma função jQuery:

jQuery.fn.extend({
    adjustHeight: function(){
        var element = $(this);
        var finalHeight = 0;
        $.each(element,function(i,compare){
            if($(compare).height() > finalHeight){
                finalHeight = $(compare).height();
            }
        });
        $.each(element,function(i,change){
            $(change).height(finalHeight);
        });
    return $(this);
    }
});

A necessidade de ajustar a altura, muitas vezes, é devido a outros efeitos como bordas e cor de fundo, como neste exemplo:

elementos-com-alturas-diferentes

Usando a função adjustHeight, todos os elementos serão ajustados para ficar com a mesma altura.

$('.text, .info, .links').adjustHeight();
<div class="container">
	<div class="text" style="height:500px;">
		<b>Text</b>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas est et neque ultricies ut venenatis ante iaculis. 
		Fusce odio purus, pretium sit amet egestas eget, luctus id enim. Nulla tempor nibh eu diam dapibus ut iaculis augue lacinia.
	</div>
	<div class="info" style="height:500px;">
		<b>Info</b>
		Nullam in risus a risus vehicula imperdiet nec eget ante. Pellentesque non sagittis dui.
	</div>
	<div class="links" style="height:500px;">
		<b>Links</b>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
		</ul>
	</div>
</div>

Resultando em melhor disposição dos elementos.

elementos-com-alturas-iguais

Atualização em 22/jan/2017

Fiz o adjustHeightv2 com algumas modificações em resposta ao comentário do Rodrigo.

Para alterar a unidade de pixels para rem, é preciso retirar as barras de comentário das linhas finalHeight = finalHeight / 16; e $(change).css({"height":finalHeight+"rem"});, comentando a linha imediatamente acima desta última.

Mas a troca de unidade não afeta a medida dos elementos quando a janela do navegador é redimensionada. Para isso, é preciso efetuar o bind do adjustHeightv2 no window resize, ver linhas 41 a 43.

jQuery.fn.extend({
  adjustHeightv2: function(){
    var element = $(this);
    var finalHeight = 0;

    /*
     * Clear previously set height
     * Needed if binding to window resize
     */
    $.each(element,function(i,change){
      $(change).css({"height":"initial"});
    });

    /* Find new height */
    $.each(element,function(i,compare){
      if($(compare).height() > finalHeight){
        finalHeight = $(compare).height();
      }
    });

    /*
     * Convert finalHeight from pixels into rem
     * Adjust rembase accordingly (14 or 16?)
     */
    //finalHeight = finalHeight / 16;

    /* Set new height */
    $.each(element,function(i,change){
      $(change).css({"height":finalHeight+"px"});
      //$(change).css({"height":finalHeight+"rem"});
    });

   return $(this);
  }
});

$(function(){
  $('.text, .info, .links').adjustHeight();
});

$(window).on('resize', function(){
  $('.text, .info, .links').adjustHeight();
});

Receba os posts do blog em seu email!


2017-01-22T01:07:20+00:00 junho 2012|Desenvolvimento Web|

7 Comentários

  1. Sandra Santana 12 de fevereiro de 2014 em 23:58- Responder

    Tatiane, poderia me dizer como uso este código no html, pois tenho pouco conhecimento e necessito desta função para aplicar nas minhas divs.

    • Tatiane Pires 13 de fevereiro de 2014 em 11:52- Responder

      Para usar essa função, seu código precisa incluir a linha abaixo no seu código:

       <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

      E tem que colocar a função adjustHeight e o trecho $(‘.text, .info, .links’).adjustHeight(); no seu arquivo de JavaScript ou no seu código html com as tags <script></script>. Substitua “.text, .info, .links” pelas classes dos elementos que terão as alturas ajustadas.

      <script type="text/javascript">
      jQuery.fn.extend({
          adjustHeight: function(){
              var element = $(this);
              var finalHeight = 0;
              $.each(element,function(i,compare){
                  if($(compare).height() > finalHeight){
                      finalHeight = $(compare).height();
                  }
              });
              $.each(element,function(i,change){
                  $(change).height(finalHeight);
              });
          return $(this);
          }
      });
      
      $('.text, .info, .links').adjustHeight();
      </script>
  2. Gustavo Costa 14 de maio de 2014 em 14:31- Responder

    Muito bom, me ajudou muito!!!

  3. Leonardo Souza 15 de fevereiro de 2016 em 17:17- Responder

    Olá Tatiane

    Uma excelente função, parabéns! Muito obrigado por compartilhar

  4. Mario oliveira 4 de janeiro de 2017 em 16:10- Responder

    Olá Tatiane,
    parabéns pelo site e por compartilhar!

  5. Rodrigo 18 de janeiro de 2017 em 16:30- Responder

    Muito bom! Não sou programador e até eu conseguir usar!!! Parabéns.
    Tem como fazer uma mudança; ao invés de pegar a altura em PX, descobrir a altura em EM? Isso ajudaria no caso onde a resolução vai diminuindo ou aumentando sem dar o F5 (atualizar página). Outro exemplo seria ao virar o smartphone, a tela aumenta a largura automaticamente em função do giroscópio do celular. Obrigado!

    • Tatiane Pires 22 de janeiro de 2017 em 01:05- Responder

      Atualizei o post, Rodrigo.

Deixar Um Comentário