An element has different dimensions, i.e., **Width** and **Height**. With the help of jQuery, we can easily work with these dimensions.
jQuery has different methods to deal with dimensions including:

* **width()**
* **innerWidth()**
* **outerWidth()**
* **height()**
* **innerHeight()**
* **outerHeight()**

We will discuss two of these, `height()` and `innerHeight()`.

 ### **jQuery - height()**
The **`jQuery - height()` method** is used to return the computed height or set the height of the element.

>**Note**: This method sets or returns the height _excluding padding, border, and margin_.

 ### **Syntax**
 #### To return Height
It returns the height of the *first matched element*.
```
$(selector).height()
```
>No parameters are needed to return the height of the element.
 #### To set Height
It sets the height of *all matched elements*.
```
$(selector).height(value)
```
The **`value` parameter** is required to set the height of the element. If the unit of height is not defined then, by default, the unit of height is set to `px`. You can also specify height in `em, pt`, etc.  

> * **`px`**- Pixel unit is Absolute Length unit and is browser dependent.
>* **`em`** - A relative unit, in which font-size is relevant to the base/parent element font-size.
>* **`pt`** - Points, Absolute Length unit, used in print media and 1pt=1/72nd of 1 Inch.

 #### To return window and document height


It can be used to get the height of the document and window. Its syntax is shown below:  

```
$(window).height()
$(document).height()
```

<html>
 <head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 </head>
 <body>

 <div id="my_block" class="container"></div><br><br>   

<div class="divs">
  <button id="b1" type="button" class="button btn btn-lg btn-block"><b>Change the height of block to 50px</b></button>
  <button id="b2" type="button" class="button btn btn-lg btn-block"><b>Change the height of block to 20em</b></button>
  <button id="b3" type="button" class="button btn btn-lg btn-block"><b>Change the height of block to 150pt</b></button>
</div>

<br>

<div class="container divs">

  <div id="text" class="container p-3 my-3 bg-dark text-white">
    The height of the block is <span id="span1"></span> px.
  </div>

  <button id="b4" type="button" class="button btn btn-lg btn-block"><b><b>Display the height of Block</b></b></button>
</div>   

 </body>
</html>

$(document).ready(function(){
  $("#b1").click(function(){
    $("#my_block").height(50);
  });
  $("#b2").click(function(){
    $("#my_block").height("20em");
  });
  $("#b3").click(function(){
    $("#my_block").height("150pt");
  });
  $("#b4").click(function(){
      $("#span1").text($("#my_block").height());
  });
});


#my_block{  
  
  height:120px;
  width:200px;
  margin-top:20px;
  border-radius: 15px;
  padding:10px;
  background-image: linear-gradient(75deg, rgba(251, 255, 0, 0.959), rgb(109, 23, 23));
}

.divs
{
  width:100%; 
  padding:0 40px;
}
.button {
  
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  height:60px;
  border-radius: 12px;
  cursor: pointer;
 
  border: 3px solid rgb(51, 6, 9);
}
#b1 {background-color: #008CBA;} 
#b2 {background-color: #f44336;}  
#b3 {background-color: #0e462c;}
#b4 
{
  background-color: #160e46;
}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#text {  
 
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  border: 2px solid rgb(243, 227, 4);
  border-radius: 19px;
  background-color: black;
}  

codemirror

 ### jQuery - innerHeight()
The **`jQuery - innerHeight()`** method is used to return the computed Inner height or set the innerHeight of an element. 

>**Note**: This method returns or sets the height including upper and lower padding and excluding margin and border.

 ### Syntax
 #### To return Inner Height 
It returns the Inner height of the *first matched element*.
```
$(selector).innerHeight()
```
>No parameters are needed to return the inner Height of the element.
 #### To set Inner Height 
It sets the Inner height of *all matched elements*.
```
$(selector).innerHeight(value)
```
The **`value` parameter** is required to set the Inner Height of the element. If the unit of height is not defined then, by default, the unit of the height is set to `px`. You can also specify height in `em, pt`, etc.  

>**Note**: Change the Height of the Block to see the Difference in the Inner Height.
   You will notice the addition of `30px` (Upper Padding: 15px + Inner Padding: 15px) in Height-value, each time you change the height to different value.

<html>
 <head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 </head>
 <body>

 <div id="my_block" class="container"></div><br><br>  

<div class="divs">
   <button id="b1" type="button" class="button btn btn-lg btn-block"><b>Change the height of block to 50px</b></button>
  <button id="b2" type="button" class="button btn btn-lg btn-block"><b>Change the height of block to 70px</b></button>
  <button id="b3" type="button" class="button btn btn-lg btn-block"><b>Change the height of block to 150px</b></button>
</div>

<div class="container divs">

  <div id="text" class="container p-3 my-3 bg-dark text-white">
    The Inner height of the block is <span id="span1"></span> px.
  </div>

  <button id="b4" type="button" class="button btn btn-lg btn-block"><b><b>Display the Inner height of Block</b></b></button>
</div>   

 </body>
</html>

$(document).ready(function(){
  $("#b1").click(function(){
    $("#my_block").height(50);
  });
  $("#b2").click(function(){
    $("#my_block").height(70);
  });
  $("#b3").click(function(){
    $("#my_block").height(150);
  });
  $("#b4").click(function(){
      $("#span1").text($("#my_block").innerHeight());
  });
});

#my_block {  
  
  height:120px;
  width:200px;
   margin-top:20px;
  border-radius: 15px;
  padding:15px;
  background-image: linear-gradient(75deg, rgba(251, 255, 0, 0.959), rgb(109, 23, 23));
}

.divs
{
  width:100%; 
  padding:0 40px;
}
.button {
  
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  height:60px;
  border-radius: 12px;
  cursor: pointer;
 
  border: 3px solid rgb(51, 6, 9);
}

#b1 {background-color: #008CBA;} 
#b2 {background-color: #f44336;}  
#b3 {background-color: #0e462c;}
#b4 
{
  background-color: #160e46;
}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#text {  
 
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  border: 2px solid rgb(243, 227, 4);
  border-radius: 19px;
  background-color: black;
}  

What are the jQuery height() and innerHeight() methods?

jQuery's `.height()` and `.innerHeight()` methods automate element height management; one excludes, the other includes padding. 

What are the jQuery height() and innerHeight() methods?

jQuery - height()

Syntax

To return Height

To set Height

To return window and document height

Example

jQuery - innerHeight()

Syntax

To return Inner Height

To set Inner Height

Example