Como posso calcular a altura de um elemento cross-browser usando jQuery?

Eu criei um plugin para alinhar um elemento no final. Na sua forma mais simples eu fiz isso:

  1. Obtém a altura de outerElement (DIV)
  2. Obtém a altura do elemento atual
  3. result = outerHeight – altura do elemento atual
  4. Definir atributo CSS ‘top’ = resultado.

E funciona … no Firefox e no IE8, mas não no Opera nem no Google Chrome.

Eu estou supondo que tem a ver com bordas, preenchimento e margem. Então, o que eu tenho que fazer para fazer o trabalho cross-browser?

ATUALIZAR
Código foi revisado e está funcionando agora.

(function($){ $.fn.alignBottom = function() { var defaults = { outerHight: 0, elementHeight: 0 }; var options = $.extend(defaults, options); var bpHeight = 0; // Border + padding return this.each(function() { options.outerHight = $(this).parent().outerHeight(); bpHeight = options.outerHight - $(this).parent().height(); options.elementHeight = $(this).outerHeight(true) + bpHeight; $(this).css({'position':'relative','top':options.outerHight-(options.elementHeight)+'px'}); }); }; })(jQuery); 

O HTML poderia ser algo como isto:

 div class="myOuterDiv"> 
Variable content here

e aplicando meu plugin jQuery:

 jQuery(".bottomAlign").alignBottom(); 

Você provavelmente precisa olhar para o método jQuery outerHeight() :

 options.outerHight = $(this).parent().outerHeight(); options.elementHeight = $(this).outerHeight( true ); // Include margins 

Você provavelmente também precisará jogar com .position().top que é a distância que o elemento já é movido para longe da parte superior do elemento que o contém:

 var new_top = $(this).parent().outerHeight() - $(this).outerHeight() - $(this).position().top; 

Outra abordagem

Algumas coisas sobre a position:relative . Elementos posicionados assim ocupam espaço, mas podem ser deslocados em qualquer direção. Note que mudá-los não muda onde ocuparam espaço, apenas onde o elemento é exibido.

Sobre a position:absolute . Um elemento absolutamente posicionado não ocupa espaço, mas precisa estar dentro de um elemento que tenha posição (isto é, position:relative )

Então, em CSS direto:

 .myOuterDiv { position: relative } .bottomAlign { position: absolute; bottom: 0 } 

Mas observe que qualquer posição que costumava ocupar (isto é, por causa da flutuação correta) não será mais usada.

Intereting Posts