jQuery height() restituisce 0 su un div visibile - perché?

Question

Ho un contenitore (thetext1) con un'altezza impostata di 360 px. "thetext1" contiene due div - uno a sinistra e uno flottato a destra - in entrambi i contenuti vengono consegnati tramite una chiamata Ajax.

Ci saranno momenti in cui il contenuto di una o più di queste div supera 360px e quindi voglio aumentare di conseguenza l'altezza di thetext1.

Il mio codice di prova

newhgt = $('#thetext1').find('div.rhs').css("background", "pink").height(); 

ritorna 0 - (il mio selettore è corretto come il div mirato è perfettamente rosa!).

Perché è questo? So - dalle risposte ai post precedenti su questo sito - che la soluzione è aggiungere un overflow: hidden thetext1, ma mi piacerebbe capire perché il mio tentativo di ottenere l'altezza del rhs e del ls div non sta andando a buon fine.

Answer 1

Assicurarsi che il codice si trova all'interno del $ .load (finestra) [non $ (document) .ready]

$(window).load(function() { 
    newhgt = $('#thetext1').find('div.rhs').css("background", "pink").height(); 
}); 

Answer 2

Il codice sembra essere corretto, qui viene demo

http://jsfiddle.net/VWBrf/1/

lavoro

Answer 3

È ancora possibile utilizzare $ (document) .ready finché si controlla se l'elemento viene caricato per primo. Ho scelto di andare con

$("_element name/id_").load(function() { 
     $(this).height(); 
}); 

Originariamente ho trovato la soluzione qui: http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

e ha scelto di utilizzare la risposta nella prima risposta.

Answer 4

Ho avuto lo stesso problema e ho notato una cosa, il div deve essere visibile quando si chiama .height();

Ma, anche se il div è visibile, i genitori di questo div devono essere visibili. Quindi è necessario GARANZIA che i genitori div siano visibili (visualizzazione! = Nessuno)

scrivere un $('#div').parent().show(); farà un genitore visibile, potrebbe essere necessario anothers parent().show();

Answer 5

newhgt = $('#thetext1').find('div.rhs').css("background", "pink")[0].getBoundingClientRect().height;