Determinando a altura dos elementos sem regras de altura CSS

Na ausência de uma regra de altura CSS para um elemento, pode ser um desafio obter sua altura. O método jQuery .height(), que requer um valor de altura CSS predefinido, parece inadequado neste cenário. No entanto, existem métodos alternativos para determinar a altura de um elemento.

jQuery .height()

Ao contrário da crença popular, jQuery .height() não depende em uma definição de altura CSS. Ele calcula a altura calculada do elemento, tornando-o adequado para cenários onde nenhuma altura CSS explícita é especificada.

DEMO

.height(): recupera a altura do elemento sem preenchimento, borda ou margem.

.innerHeight(): recupera a altura do elemento incluindo preenchimento, mas excluindo borda e margem.

.outerHeight(): recupera a altura do elemento incluindo borda, mas excluindo margin.

.outerHeight(true): recupera a altura do elemento, incluindo borda e margem.

Snippet de código para demonstração ao vivo

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('
Height (.height() returns) : '   $heightTest.height()   ' [Just Height]
')
    .append('
Inner Height (.innerHeight() returns): '   $heightTest.innerHeight()   ' [Height   Padding (without border)]
')
    .append('
Outer Height (.outerHeight() returns): '   $heightTest.outerHeight()   ' [Height   Padding   Border]
')
    .append('
Outer Height (.outerHeight(true) returns): '   $heightTest.outerHeight(true)   ' [Height   Padding   Border   Margin]
')
});