Obter altura de div sem nenhuma altura definida em css

Existe alguma maneira de obter a altura de um elemento se não houver nenhuma regra de altura CSS definida para o elemento. Não posso usar o .height()método jQuery porque ele precisa primeiro de uma regra CSS? Existe alguma outra maneira de obter a altura?

jQuery .heightirá retornar a altura do elemento. Não precisa de definição CSS, pois determina a altura calculada.

DEMO

Você pode usar .height(), .innerHeight()ou outerHeight()com base no que você precisa.

.height() - retorna a altura do elemento exclui preenchimento, borda e margem.

.innerHeight() - retorna a altura do elemento inclui preenchimento, mas exclui borda e margem.

.outerHeight() - retorna a altura do div incluindo a borda, mas exclui a margem.

.outerHeight(true) - retorna a altura do div incluindo a margem.

Verifique o trecho de código abaixo para uma 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('<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>

Apenas uma nota caso outros tenham o mesmo problema.

Eu tive o mesmo problema e encontrei uma resposta diferente. Descobri que obter a altura de um div que é determinado por seu conteúdo precisa ser iniciado em window.load ou window.scroll not document.ou caso contrário, eu obtenho alturas ímpares / alturas menores, ou seja, antes que as imagens sejam carregadas. Eu também usei 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());   

});

Pode fazer isso no jQuery . Tente todas as opções .height(), .innerHeight()ou .outerHeight().

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

Captura de tela de exemplo

Espero que isto ajude. Obrigado!!

Além disso, certifique-se de que o div esteja atualmente anexado ao DOM e visível .