Obtenga la altura de div sin altura establecida en css

¿Hay alguna forma de obtener la altura de un elemento si no hay un conjunto de reglas de altura CSS para el elemento? No puedo usar el .height()método jQuery porque primero necesita un conjunto de reglas CSS? ¿Hay alguna otra forma de obtener la altura?

jQuery .heightle devolverá la altura del elemento. No necesita definición de CSS ya que determina la altura calculada.

MANIFESTACIÓN

Se puede utilizar .height(), .innerHeight()o outerHeight()sobre la base de lo que necesita.

.height() : devuelve la altura del elemento, excluye el relleno, el borde y el margen.

.innerHeight() : devuelve la altura del elemento, incluye relleno, pero excluye el borde y el margen.

.outerHeight() : devuelve la altura del div incluido el borde pero excluye el margen.

.outerHeight(true) - devuelve la altura del div incluido el margen.

Consulte el siguiente fragmento de código para ver una 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('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; ">
</div>

Solo una nota en caso de que otros tengan el mismo problema.

Tuve el mismo problema y encontré una respuesta diferente. Descubrí que obtener la altura de un div cuya altura está determinada por su contenido debe iniciarse en window.load , o window.scroll no document.ready, de lo contrario, obtengo alturas impares / alturas más pequeñas, es decir, antes de que se carguen las imágenes. También usé outerHeight () .

var currentHeight = 0;
$(window).load(function() {
    //get the natural page height -set it in variable above.

    currentHeight = $('#js_content_container').outerHeight();

    console.log("set current height on load = " + currentHeight)
    console.log("content height function (should be 374)  = " + contentHeight());   

});

Puede hacer esto en jQuery . Pruebe todas las opciones .height(), .innerHeight()o .outerHeight().

$('document').ready(function() {
    $('#right_div').css({'height': $('#left_div').innerHeight()});
});

Captura de pantalla de ejemplo

Espero que esto ayude. ¡¡Gracias!!

También asegúrese de que el div esté actualmente agregado al DOM y sea visible .