Obter altura de div sem nenhuma altura definida em css

90

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?

Samuel Lopez
fonte
2
O que o faz pensar que height()precisa de uma regra de css?
James Montagne
height()obterá a altura calculada dos elementos ...
elclanrs
1
parece que você está tentando obter a altura de algo dentro de um elemento oculto? ou o próprio elemento está oculto. Não posso fazer!
charlietfl
Inclua seu código porque não há nenhum requisito para heightter o css definido. Esse link não tem nada a ver com jquery.
James Montagne
esse link "insight" tem 7 anos!
charlietfl

Respostas:

220

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.

insira a descrição da imagem aqui

.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>

Selvakumar Arumugam
fonte
37

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());   

});
Iamsamstimpson
fonte
1
Provavelmente você está obtendo alturas estranhas porque há mais instruções que alteram a altura depois de usá-las / imprimi-las. Recomenda-se pedir alturas no final do seu roteiro
Gjaa
10

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

insira a descrição da imagem aqui

Espero que isto ajude. Obrigado!!

Madan Sapkota
fonte
8

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

Tom Scholes
fonte
13
Observe que isso pode ser mais adequado como um comentário do que uma resposta.
kkuilla
4
Ele não teria privilégios de comentário, relaxem rapazes.
StackOverflowed em
3
Eu considero essa informação crucial, porque nenhuma das outras respostas funcionará se o elemento não estiver anexado ao DOM para começar.
Guido