How to get height of <div> in px dimension

Question

I have used jQuery library to find out height of a div.

Below is my div element with attributes :

<DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV> 

Below is my jQuery code to get height of <div>

var result = $("#myDiv").css('height'); alert(result); 

After executing above statement I am getting result as "auto". Actually this is I am not expecting, instead of that I want the result in px dimension.

Answer 1

Use .height() like this:

var result = $("#myDiv").height(); 

There's also .innerHeight() and .outerHeight() depending on exactly what you want.

You can test it here, play with the padding/margins/content to see how it changes around.

Answer 2

Although they vary slightly as to how they retrieve a height value, i.e some would calculate the whole element including padding, margin, scrollbar, etc and others would just calculate the element in its raw form.
You can try these ones:

javascript:

var myDiv = document.getElementById("myDiv"); myDiv.clientHeight; myDiv.scrollHeight; myDiv.offsetHeight; 

or in jquery:

$("#myDiv").height(); $("#myDiv").innerHeight(); $("#myDiv").outerHeight();