Question

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

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

The styling would look like:

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

Using jQuery I would like to obtain the height of the child as I would if the div was outside the parent.

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

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

Answer 1

Try all these and just working fine:

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

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

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

According to you edit:

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

$('#parent').css({visibility: 'hidden', display: 'none'});

console.log(height);

DEMO