How to get x% height in px?

Question

I gave 100% height to a div and I want the actual height in px.
How can I find out the height of that div?

Answer 1

With jquery you can use this, when container is the id of the div:

$(document).ready(function() {
    alert($('#container').height());
});

Answer 2

Using jQuery you should be able to use:

$('#div').height();

Answer 3

As said, using jQuery you can use:

$(document).ready(function(){
   $("#container").height();
});

Please be aware though of the way height is calculated by jQuery. To quote from the documentation:

Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property.

What this means is, that it will ignore any margin, padding and borders you may have applied.

The alternatives nobody mentioned you can avail of to get the exact height you are interested in are as follows:

innerHeight()

$(document).ready(function(){
   $("#container").innerHeight();
});

Use this if you want not only the element height but also include any padding.

outerHeight()

$(document).ready(function(){
   $("#container").outerHeight(); //Include padding and borders
   $("#container").outerHeight(true); //Include padding, borders and margins
});

Use this if you want not only the element height but also include any padding, borders and margins (if true is passed as parameter).

See DEMO

The demo shows how a height of 300px is applied to a div. In addition the css applies margin-top of 20px, padding-top of 50px as well as borders of 5px which all effect the total height.

Demo output for height()

Notice though how jQuery height() still only returns 300 pixels, ignoring the additional height added to the element through css.

Demo output for innerHeight()

Notice how jQuery innerHeight() return 350 pixels, which is the 300 from the div + the 50 for the padding.

Demo output for outerHeight()

Notice how jQuery outerHeight() return 360 pixels, which is the 300 from the div + the 50 for the padding + 10 for the border (5 bottom and 5 top).

Demo output for outerHeight(true)

Notice how jQuery outerHeight(true) return 380 pixels, which is the 300 from the div + the 50 for the padding + 10 for the border (5 bottom and 5 top) + 20 from the margin.