jQuery height() devuelve 0 en un div visible, ¿por qué?

Question

Tengo un contenedor (thetext1) con una altura establecida de 360px. "thetext1" contiene dos divs, uno a la izquierda y otro a la derecha, en los cuales el contenido se entrega a través de una llamada ajax.

Habrá momentos en que el contenido en uno u otro de estos divs exceda 360px, por lo que quiero aumentar la altura deltext1 en consecuencia.

Mi código de prueba

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

devuelve 0 - (mi selector es correcto como la div apuntado es perfectamente rosa!).

¿Por qué es esto? Sé, a partir de las respuestas a las publicaciones anteriores en este sitio, que la solución es agregar desbordamiento: oculto el texto1, pero me gustaría entender por qué mi intento de obtener el alto de rhs y lhs div está fallando.

Answer 1

Asegúrese de que el código está dentro del $ (ventana) .load [No $ (document) ready]

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

Answer 2

Su código parece ser correcta, aquí está de demostración

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

de trabajo

Answer 3

Todavía puede usar $ (document) .ready siempre que compruebe si el elemento está cargado primero. Decidí ir con

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

Originalmente había encontrado la solución aquí: http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

y optó por usar la respuesta en la primera respuesta.

Answer 4

Tuve el mismo problema, y ​​noté una cosa, el div debe estar visible cuando llamas .height();

Pero, incluso si el div está visible, los padres de este div deben estar visibles. Por lo que debe garantee que los padres div son visibles (pantalla! = Ninguno)

escribir un $('#div').parent().show(); hará una matriz visible, que pueda necesitar anothers parent().show();

Answer 5

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