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

7 respostas para “jQuery para ajustar a altura de elementos HTML”

    1. 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>
  1. 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!

Deixe seu comentário