Issue to get height of a div with jquery

Question

I got some trouble to get the height of a div with jquery.

I create the div in the html and affect some text to it when I click a button. After that I want to get the height of that div to vertically align it in the parent div, But the Height() function of jquery return 0 to me.

In the debug console of google chrome I see the height of the div then I point at it, but the height is still not returning the value.

JS FIDDLE DEMO

Here is my result on JS FIDDLE

I got google chrome Version 35.0.1916.114 m

Answer 1

The height of the div#lblMsgBoxMessage is 0 because when you try to use :

$("#lblMsgBoxMessage").height()

the div element is hided .

You can try by clicking on the div#click again, and then the height is available because the element was already displayed.

You have to set the height after the :

$("#msgBox").show();

like this : fiddle

Answer 2

Elements with display: none (including children of elements with display: none ) have no height. You need to show the element first in order to get its height.

If you move this line:

// display height of the message in the button
$("#click").text($("#lblMsgBoxMessage").height());

Underneath this line:

// display
$("#msgBox").show();

You'll be able to see the height. JSFiddle: http://jsfiddle.net/FcJgz/416/