Getting the height of a div

Question

<span style="width:100%" id="learning_menu"><div id="aLM" style="width:100%;height:100%">test | test | test</div></span>

The code above is the current HTML that I have. I'll be making the inner "div" shrink-and-grow using jQuery. I can't figure out how to get the height of the span/div though. I'm not going to set a specific value in CSS because it could change depending on the browser. Because of this, my JavaScript (style.height) always returns 0.

Any ideas?

Possible duplicate of [How do you get the rendered height of an element?](https://stackoverflow.com/questions/526347/how-do-you-get-the-rendered-height-of-an-element) — Penny Liu, Aug 06 '19 at 15:01

score 23 · Answer 1 · answered May 23 '11 at 18:26

23

Here it is in plain js and no jQuery required:

document.getElementById("learning_menu").offsetHeight;

answered May 23 '11 at 18:26

Naftali

144,921
39
244
303

1

And it's [pretty cross-browser, too](http://www.quirksmode.org/dom/w3c_cssom.html#t34) +1 – Matt Ball May 23 '11 at 18:28
@MattBall, yes, yes it is, and without the need for unnecessary jQuery – Naftali May 23 '11 at 18:28
I was using this at first with no avail, that is why I came here. I'm using jQuery so it doesn't bother me much to use it ;) – Freesnöw May 23 '11 at 18:32
@Neal - But if `Div` is hidden then it's return height `'0'`. ? any idea? – prog1011 Feb 27 '15 at 11:29

score 3 · Answer 2 · answered May 23 '11 at 18:24

3

Using jQuery: that would be the .height() method.

var span_height = $('#learning_menu').height(),
    div_height = $('#aLM').height();

N.B. it is invalid HTML to place a block-level element (in this case the <div>) inside of an inline element (the <span>).

answered May 23 '11 at 18:24

Matt Ball

354,903
100
647
710

Thanks for the post! I'll be going with BnW's because he provided me a bit more details on the usage. – Freesnöw May 23 '11 at 18:25

score 1 · Answer 3 · answered May 23 '11 at 18:31

Hm. I am not sure wither I’ve got your issue right or not but… From pure javascript you can use clientHeight (or offsetHeight) property of the element to get it’s height in pixels. From jquery just use .height() method (wich is actually a browser-agnostic wrapper around clientHeight property).

score 0 · Accepted Answer · answered May 23 '11 at 18:24

0

$("#learning_menu").height() will return the span's height

answered May 23 '11 at 18:24

BnW

592
1
3
13

I'll be awarding you the "answer" because you gave me a full code example. Thanks so much! It works great now :) – Freesnöw May 23 '11 at 18:25
This answer uses the most useless library of all, there are so many web developers using it, that it's impossible to find someone who **really** knows javascript and can explain it's internals, always jQuery, I hate it more and more every day. – Iharob Al Asimi May 30 '15 at 21:25
@iharob Why complicates things when jQuery gives you all you need in one line of code? besides, OP wanted the solution in jQuery. If you want to know how to do that in plain javascript you should demand that in a seperate question – BnW Jun 01 '15 at 15:33

Getting the height of a div

4 Answers4

Linked