43

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.

Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
pravin
  • 2,155
  • 8
  • 37
  • 49
  • 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:03

5 Answers5

151

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();
Shaoz
  • 10,573
  • 26
  • 72
  • 100
  • 5
    Very useful for translate to javascript when you want to avoid jQuery – IgniteCoders Dec 11 '14 at 11:57
  • Most of answers tem to Forget 'scrollHeight'! And.... most of the times, when system is sort of Bootstraped multi-layered... it's the real one! Thanks! You couls use Math.round(Math.max(bodyDiv.clientHeight, bodyDiv.scrollHeight, bodyDiv.offsetHeight) || 0) – Pedro Ferreira Apr 03 '16 at 03:26
71

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 3
    Ah, what the hell. +1 for beating me by a minute instead of the usual 2-20 seconds. – djdd87 Oct 01 '10 at 12:54
  • I always get 1 when I use this method. – Roy Hinkley Jun 12 '14 at 18:29
  • @AndroidAddict is your content all floated inside the div by chance? if so give it an `overflow: auto` so the height expands to the floats correctly. This is just how floats behave, give it a border to see what I mean. – Nick Craver Jun 12 '14 at 22:52
33

Use height():

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

This will give you the unit-less computed height in pixels. "px" will be stripped from the result. I.e. if the height is 400px, the result will be 400, but the result will be in pixels.

If you want to do it without jQuery, you can use plain JavaScript:

var result = document.getElementById("myDiv").offsetHeight;
djdd87
  • 67,346
  • 27
  • 156
  • 195
  • 12
    Thanks for the "raw" javascript solution. – peter.o Jul 25 '13 at 12:21
  • Note that `element.offsetHeight` [does not take into account](https://stackoverflow.com/a/45419412/3423324) any transforms (e.g. `transform: scale(0.5)`). If you need those, `element.getBoundingClientRect().height` is better suited. – luckydonald Nov 11 '20 at 12:45
2

There is a built-in method to get the bounding rectangle: Element.getBoundingClientRect.

The result is the smallest rectangle which contains the entire element, with the read-only left, top, right, bottom, x, y, width, and height properties.

See the example below:

let innerBox = document.getElementById("myDiv").getBoundingClientRect().height;
document.getElementById("data_box").innerHTML = "height: " + innerBox;
body {
  margin: 0;
}

.relative {
  width: 220px;
  height: 180px;
  position: relative;
  background-color: purple;
}

.absolute {
  position: absolute;
  top: 30px;
  left: 20px;
  background-color: orange;
  padding: 30px;
  overflow: hidden;
}

#myDiv {
  margin: 20px;
  padding: 10px;
  color: red;
  font-weight: bold;
  background-color: yellow;
}

#data_box {
  font: 30px arial, sans-serif;
}
Get height of <mark>myDiv</mark> in px dimension:
<div id="data_box"></div>
<div class="relative">
  <div class="absolute">
    <div id="myDiv">myDiv</div>
  </div>
</div>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
1

For those looking for a plain JS solution:

let el = document.querySelector("#myElementId");

// including the element's border
let width = el.offsetWidth;
let height = el.offsetHeight;

// not including the element's border:
let width = el.clientWidth;
let height = el.clientHeight;

Check out this article for more details.