Question

How can I get the height of an element which has got a parent element that has display: none?

An example here: jsfiddle.net

Thanks

Lukas

Answer 1

Temporarily show()ing an element to retrieve a child’s height seems to work OK.

HTML:

<div id="target" style="display:none;">
    <!-- Add a background color to see if it's noticeable -->
    <div style="height:123px; background:#000;"></div>
</div>

JS:

// Show the hidden parent of the element we want the height of
$("#target").show(0, function(){
    // Find and grab the height of the element we want
    the_height = $(this).find("div").height();
// Hide parent and display child's height after it
}).hide().after(the_height);

Demo: jsfiddle.net/Gts6A/72