JQuery: get child element height when parent height is 0px

Question

I have a div containing text that is inside another div, displayed only under certain circumstances. HTML for this is simple and looks like this:

<div id='parent'> <div id='child'> Some text inside child div </div> </div> 

The style will look like this:

 #parent{ display:none; height:0px; } 

Using jQuery, I would like to get the height of the child, as if the div were outside the parent.

The following javascript returns 0, I want something around, maybe 15.

 var child_height = $('#child').height(); alert(child_height); 

Answer 1

Try it all and just work fine:

 console.log($('#child').outerHeight()); console.log($('#child').css('height')); console.log($('#child').height()); 

According to you change:

 var height = $('#parent').css({visibility: 'hidden', display : 'block'}).find('#child').height(); $('#parent').css({visibility: 'hidden', display: 'none'}); console.log(height); 

Demo

Answer 2

You can temporarily show hidden parents, then hide them after:

 // .parents means it will search through all parents, not just first hidden var hiddenParents = $("#child").parents(":hidden").show(); var childHeight = $("#child").height(); hiddenParents.hide(); alert(childHeight); 

http://jsfiddle.net/zjpav/3/

Answer 3

 var child_height = $('#child').outerHeight(); alert(child_height);​ 

Demo

Although on FF 10, your source code just works fine.

Update as comment:

For hidden fields, it will return zero, you can do something like this:

 jQuery('#parent').css('display','block'); var child_height = $('#child').outerHeight(); alert(child_height); child_height = $('#child').height(); alert(child_height); jQuery('#parent').css('display','none'); 

Demo

Answer 4

I noticed that you said: "inside another div is displayed only under certain circumstances." If the parent div has display: none; (for example, if you hide it using any one of several jQuery functions, this is how it will end as), then the child’s height will be returned as 0.