jQuery height() returns 0 on a visible div - why?

Question

I have a container (thetext1) with a set height of 360px. \"thetext1\" contains two divs - one on the left and one floated to the right - into both of which content is deli

Answer 1

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

Answer 2

I solved my problem like this:

setInterval(function(){
  alert($("#element").height());
}, 1000);

It works for me.

Answer 3

You can still use $(document).ready as long as you check to see if the element is loaded first. I chose to go with

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

I originally found the solution here: http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

And chose to use the answer in the first response.

Answer 4

I had the same problem, and I noticed one thing, the div needs to be visible when you call .height();

But, even if the div is visible, the parents of this div needs to be visible. So you must garantee that parents div are visible (display != none)

writing a $('#div').parent().show(); will make a parent visible, you may need anothers parent().show();

Answer 5

Make sure the code is inside the $(window).load [not $(document).ready ]

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