Set the Height of a Div Using jQuery

To set the height of a div in jQuery we can do this easily by using the jQuery height() method.

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

Let’s take a look at a simple example below.

Let’s say we have the following HTML:

<div id="div1">
  <p>This paragraph is in a div that we want to set the height of.</p>
</div>

If we want to set the height of #div1 to say 200px, we will use the jQuery height() method in the following JavaScript code.

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

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

jQuery("#div1").height(200);

Example of Using jQuery to Set the Height of a Div

In this example, we will have a simple div with a background color. The height of the div will be 100px. We will have an input field that will allow the user to enter a new height for the div. Here is the HTML code.

<style>#div2 { width:300px; height: 100px; background: #7bbfa2; }</style>
<div id="div1">
  <div id="div2"></div>
  <p>Enter a new height below:</p>
  <input type="text" id="new-height">
  <div id="click-me">Change height</div>
</div>

We can utilize the jQuery click() method to run a function when a user enters a new height.

We can use the val() method to get the new height the user has entered. We will then use the height() method to set the new height to #div2, based on what the user has entered.

Here is the code:

$("#click-me").click(function(){
  //Get the new height the user has entered
  var newHeight = Number($('#new-height').val());

  //Set the new height of #div
  $('#div2').height(newHeight);
});

The final code and output for setting the height of a div using jQuery is below:

Code Output:

Full Code:

<style>#div2 { width:300px; height: 100px; background: #7bbfa2; }</style>
<div id="div1">
  <div id="div2"></div>
  <p>Enter a new height below:</p>
  <input type="text" id="new-height">
  <div id="click-me">Change height</div>
</div>

<script>

$("#click-me").click(function(){
  var newHeight = Number($('#new-height').val());
  $('#div2').height(newHeight);
});

</script>

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