css javascript how do you get the rendered height of an element

css javascript how do you get the rendered height of an element  using -'javascript,jquery,css,height'

How do you get the rendered height of an element?

Lets say you have a <div> element with some content inside. This content inside is going to stretch the height of the <div>. How do you get the "rendered" height when you haven't explicitly set the height. Obviously, I tried:  

var h = document.getElementById('someDiv').style.height;

Is there a trick for doing this? I am using jQuery if that helps.

asked Oct 13, 2015 by nikhilapatil
0 votes

11 Answers

0 votes

It should just be


with jQuery. This retrieves the height of the first item in the wrapped set as a number.

Trying to use


only works if you have set the property in the first place. Not very useful!

answered Oct 13, 2015 by nimisha.jagtap
0 votes

Try one of:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight includes the height and vertical padding.

offsetHeight includes the height, vertical padding, and vertical borders.

scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

answered Oct 13, 2015 by ashish singh
0 votes

NON JQUERY since there were a bunch of links using elem.style.height in the top of these answers...





Or one of my favorite references: http://youmightnotneedjquery.com/

answered Oct 13, 2015 by nikhilapatil
0 votes

You can use .outerHeight() for the purpose.

It will give you full rendered height of the element. Also you don't need to set any css-height of the element. For precaution you can keep it's height auto so it can be rendered as per content's height.

//if you need height of div excluding margin/padding/border

//if you need height of div with padding but without border + margin

// if you need height of div including padding and border

//and at last for including border + margin + padding, can use

For a clear view of these function you can go for jQuery's site or a Detail Post Here.

it will clear difference between .height() / innerHeight() / outerHeight()

answered Oct 13, 2015 by manju bhargava
0 votes

Definitely use

$('#someDiv').height()   // to read it


$('#someDiv').height(newHeight)  // to set it

I'm posting this as an additional answer because theres a couple important things I just learnt.

I almost fell into the trap just now of using offsetHeight. This is what happened :

  • I used the good old trick of using a debugger to 'watch' what properties my element has
  • I saw which one has a value around the value I was expecting
  • It was offsetHeight - so I used that.
  • Then i realized it didnt work with a hidden DIV
  • I tried hiding after calculating maxHeight but that looked clumsy - got in a mess.
  • I did a search - discovered jQuery.height() - and used it
  • found out height() works even on hidden elements
  • just for fun I checked the jQuery implementation of height/width

Here's just a portion of it :

Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])

Yup it looks at BOTH scroll and offset. If that fails it looks even further, taking into account browser and css compatibility issues. In other words STUFF I DONT CARE ABOUT - or want to.

But I dont have to. Thanks jQuery!

Moral of the story : if jQuery has a method for something its probably for a good reason, likely related to compatibilty.

If you haven't read through the jQuery list of methods recently I suggest you take a look.

answered Oct 13, 2015 by tejas lakhani
0 votes

So is this the answer?

"If you need to calculate something but not show it, set the element to visibility:hidden and position:absolute, add it to the DOM tree, get the offsetHeight, and remove it. (That's what the prototype library does behind the lines last time I checked)."

I have the same problem on a number of elements. There is no jQuery or Prototype to be used on the site but I'm all in favor of borrowing the technique if it works. As an example of some things that failed to work, followed by what did, I have the following code:

// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
    var DoOffset = true;
    if (!elementPassed) { return 0; }
    if (!elementPassed.style) { return 0; }
    var thisHeight = 0;
    var heightBase = parseInt(elementPassed.style.height);
    var heightOffset = parseInt(elementPassed.offsetHeight);
    var heightScroll = parseInt(elementPassed.scrollHeight);
    var heightClient = parseInt(elementPassed.clientHeight);
    var heightNode = 0;
    var heightRects = 0;
    if (DoBase) {
        if (heightBase > thisHeight) { thisHeight = heightBase; }
    if (DoOffset) {
        if (heightOffset > thisHeight) { thisHeight = heightOffset; }
    if (DoScroll) {
        if (heightScroll > thisHeight) { thisHeight = heightScroll; }
    if (thisHeight == 0) { thisHeight = heightClient; }
    if (thisHeight == 0) { 
        // Dom Add:
        // all else failed so use the protype approach...
        var elBodyTempContainer = document.getElementById('BodyTempContainer');
        heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
        if (heightNode > thisHeight) { thisHeight = heightNode; }
        // Bounding Rect:
        // Or this approach...
        var clientRects = elementPassed.getClientRects();
        heightRects = clientRects.height;
        if (heightRects > thisHeight) { thisHeight = heightRects; }
    // Default height not appropriate here
    // if (thisHeight == 0) { thisHeight = elementHeightDefault; }
    if (thisHeight > 3000) {
        // ERROR
        thisHeight = 3000;
    return thisHeight;

which basically tries anything and everything only to get a zero result. ClientHeight with no affect. With the problem elements I typically get NaN in the Base and zero in the Offset and Scroll heights. I then tried the Add DOM solution and clientRects to see if it works here.

29 Jun 2011, I did indeed update the code to try both adding to DOM and clientHeight with better results than I expected.

1) clientHeight was also 0.

2) Dom actually gave me a height which was great.

3) ClientRects returns a result almost identical to the DOM technique.

Because the elements added are fluid in nature, when they are added to an otherwise empty DOM Temp element they are rendered according to the width of that container. This get weird, because that is 30px shorter than it eventually ends up.

I added a few snapshots to illustrate how the height is calculated differently. Menu block rendered normally Menu block added to DOM Temp element

The height differences are obvious. I could certainly add absolute positioning and hidden but I am sure that will have no effect. I continued to be convinced this would not work!

(I digress further) The height comes out (renders) lower than the true rendered height. This could be addressed by setting the width of the DOM Temp element to match the existing parent and could be done fairly accurately in theory. I also do not know what would result from removing them and adding them back into their existing location. As they arrived through an innerHTML technique I will be looking using this different approach.

* HOWEVER * None of that was necessary. In fact it worked as advertised and returned the correct height!!!

When I was able to get the menus visible again amazingly DOM had returned the correct height per the fluid layout at the top of the page (279px). The above code also uses getClientRects which return 280px.

This is illustrated in the following snapshot (taken from Chrome once working.)
enter image description here

Now I have noooooo idea why that prototype trick works, but it seems to. Alternatively, getClientRects also works.

I suspect the cause of all this trouble with these particular elements was the use of innerHTML instead of appendChild, but that is pure speculation at this point.

answered Oct 13, 2015 by rajeshujade
0 votes

I made a simple code that doesn't even need JQuery and probably gonna help some people. It gets the total height of 'ID1' after loaded and use it on 'ID2'

function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;

Then just set the body to load it

answered Oct 13, 2015 by sachin valanju
0 votes

offsetHeight, usually.

If you need to calculate something but not show it, set the element to visibility:hidden and position:absolute, add it to the DOM tree, get the offsetHeight, and remove it. (That's what the prototype library does behind the scenes last time I checked).

answered Oct 13, 2015 by amit.gupta
0 votes

If you are using jQuery already, your best bet is .outerHeight() or .height(), as has been stated.

Without jQuery, you can check the box-sizing in use and add up various paddings + borders + clientHeight, or you can use getComputedStyle:

var h = getComputedStyle(document.getElementById('someDiv')).height;

h will now be a string like a "53.825px".

And I can't find the reference, but I think I heard getComputedStyle() can be expensive, so it's probably not something you want to call on each window.onscroll event (but then, neither is jQuery's height()).

answered Oct 13, 2015 by dahiyabecomp
0 votes

Have you set the height in the css specifically? If you haven't you need to use offsetHeight; rather than height

var h = document.getElementById('someDiv').style.offsetHeight;
answered Oct 13, 2015 by param.oncemore
0 votes

Sometimes offsetHeight will return zero because the element you've created has not been rendered in the Dom yet. I wrote this function for such circumstances:

function getHeight(element)
    element.style.visibility = "hidden";
    var height = element.offsetHeight + 0;
    element.style.visibility = "visible";
    return height;
answered Oct 13, 2015 by shegokar.anjeet