Get the Height of a Div Using jQuery

To get the height of a div using jQuery we can use two methods, the jQuery height() method or the outerHeight() method.

$("#div1").height();

$("#div2").outerHeight();

The main difference between the height() and outerHeight() methods is that the outerHeight() method will return the same thing as the height method, plus any padding and/or border-width that might be added to the element.

We find it most useful to know the height of an element including its padding and border, so in general, we prefer to use the outerHeight method.

Let’s say we have the following HTML:

<style>#div1 { padding: 10px; margin: 10px; }</style>
<div id="div1">
  <p>This paragraph is in a div that we want to get the height of.</p>
</div>

If we want to get the height of #div1, we will use the jQuery height() method in the following Javascript code.

$("#div1").height();

Since the div has padding in it, if we want to get the height of #div1 with padding, we would use the outerHeight() method;

$("#div1").outerHeight();

Finally, since the #div1 element also has a margin of 10px on all sides, if we want to get the height of #div1 including padding and margin, we would use the outerHeight method and pass the boolean value true in the method.

$("#div1").outerHeight(true);

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#div1").outerHeight();

Getting the height of an element can also be done using pure JavaScript with the offsetHeight property.

Using jQuery to Get and Change the Height of a div

In the example below, we create a div and the ability to add as many paragraphs as we want to the div. Each time we add a new paragraph to the div, it will increase the height of the div. We will then let the user check the height of the div whenever they want. Here is the initial HTML setup:

<style>#div2 { width:300px; border: 1px solid #444; padding: 5px; }</style>
<div id="div2">
  <div>This is some text.</div>
</div>
<div>
  <span>Click the button "Add text" below to add text and increase the height of the div.</span>
  <span>Click the "Get Height" button below to get the height value of #div2.</span>
  <span>Click the "Get Outer Height" button below to get the outerHeight value of #div2.</span>
</div>
<div id="click-me1" class="click-me">Add text</div>
<div id="click-me2" class="click-me">Get Height</div>
<div id="click-me3" class="click-me">Get Outer Height</div>
<div id="results"></div>
<br>

We can utilize both the jQuery click() method and jQuery appendTo() method to add new text to #div2.

Then use the height() and outerHeight() methods to get the height and height+padding+border-width values of #div2. Finally, we will use the jQuery text() method to display the new height results.

Here is the code:

$("#click-me1").click(function(){
    $('<div class="new-p">This is some more text.</div>').appendTo("#div2");
});
$("#click-me2").click(function(){
    var height1 = $("#div2").height();
    $("#results").text(height1);
});
$("#click-me3").click(function(){
    var height2 = $("#div2").outerHeight();
    $("#results").text(height2);
});

You will notice that the Outer Height will always return a height that is +12 on the height value. This is because there is padding of 5px on the top and bottom, and a border of 1px on the top and bottom of the div. Add those up and you get 12px.

The final code and output for this example is below:

Code Output:

Full Code:

<style>#div2 { width:300px; border: 1px solid #444; padding: 5px; }</style>
<div id="div2">
  <div>This is some text.</div>
</div>
<br>
<div>
  <span>Click the button "Add text" below to add text and increase the height of the div.</span>
  <span>Click the "Get Height" button below to get the height value of #div2.</span>
  <span>Click the "Get Outer Height" button below to get the outerHeight value of #div2.</span>
</div>
<div id="click-me1" class="click-me">Add text</div>
<div id="click-me2" class="click-me">Get Height</div>
<div id="click-me3" class="click-me">Get Outer Height</div>
<div id="results"></div>

<script>

$("#click-me1").click(function(){
    $('<div class="new-p">This is some more text.</div>').appendTo("#div2");
});
$("#click-me2").click(function(){
    var height1 = $("#div2").height();
    $("#results").text(height1);
});
$("#click-me3").click(function(){
    var height2 = $("#div2").outerHeight();
    $("#results").text(height2);
});

</script>

Hopefully this article has helped you understand how to get the height of div using jQuery.