Determinación de la altura de los elementos sin reglas de altura CSS

En ausencia de una regla de altura CSS para un elemento, puede ser un desafío obtenerla su altura. El método jQuery .height(), que requiere un valor de altura CSS predefinido, parece inadecuado en este escenario. Sin embargo, existen métodos alternativos para determinar la altura de un elemento.

jQuery .height()

Contrariamente a la creencia popular, jQuery .height() no depende en una definición de altura CSS. Calcula la altura calculada del elemento, lo que lo hace adecuado para escenarios donde no se especifica una altura CSS explícita.

DEMO

.height(): recupera la altura del elemento sin relleno, borde o margen.

.innerHeight(): Recupera la altura del elemento incluyendo el relleno pero excluyendo el borde y el margen.

.outerHeight(): Recupera la altura del elemento incluyendo el borde pero excluyendo margin.

.outerHeight(true): recupera la altura del elemento, incluidos el borde y el margen.

Fragmento de código para la demostración en 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]
')
});