Updated April 18, 2023
Introduction to jQuery equal height
The jQuery equal height is used to make equal height of all children elements of a parent container. It is a built-in property in jQuery for the HTML element. Suppose we have one or more blocks or elements to put the content in parallel column and to keeps the height of all the selected elements exactly equal we can use the equal height. By using the HTML, CSS and JavaScripts we can create the equal height column elements. We can add as much content as we want on a single or multiple columns but the height of each column will be equal according to highest height.
Syntax:
$( "selector" ).css( {"height " : "maxHeight"} );Where,
- css(): The css() function used to sets or gets one or more property of the selected element.
- height: The height is the property of the selected element which is to set by the maxHeight value.
- maxHeight: The maxHeight is the max height value to set equal height for each columns.
Working
- The jQuery equal height sets equal height of all children elements of a parent container.
- Suppose we have few list of sub elements of the div element, whose height should be equal.
- So we can use the equal height as “$( “divClass” ).css( {“height” : 70} );”, where css() function sets the property of all the selected elements as here the property is height which sets the equal height of all selected element, so as a result the equal height for all the columns is set to 70.
Examples of jQuery equal height
Given below are the examples mentioned:
Example #1
Example of jQuery equal height to set the equal height of all selected element for div element.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery equal height function </title>
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<style>
.container
{
width: 80%;
margin: 0 auto;
}
.col-container:after
{
content: "";
display: block;
clear: both;
}
.col
{
float: left;
width: 33.3%;
}
.c1
{
background-color: #FF0000;
}
.c2
{
background-color: #FFFF00;
}
.c3
{
background-color: #FF00FF;
}
</style>
</head>
<body>
<div class = "container">
<h3> This an example of equal height function: </h3>
<div class = "col c1">
This is a small block of div to test jQuery equal height function.
</div>
<div class = "col c2">
This is a intermediate block of div to test jQuery equal height function.
This is a intermediate block of div to test jQuery equal height function.
</div>
<div class = "col c3">
This is a big block of div to test jQuery equal height function.
This is a big block of div to test jQuery equal height function.
This is a big block of div to test jQuery equal height function.
</div>
</div>
<script>
$(document).ready(function () {
// set the all columns to the height of the tallest column by using a function
var equalHeight = function () {
// the height of each column is reset to default calculated by browser
$('.col').css('height', 'auto');
var maxHeight = 0;
// get the maximum height
$('.col').each(function () {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
// the maximum height is set to each height of column
$('.col').css('height', maxHeight);
};
// equal height set on page load
equalHeight();
// equal height set when the container of these columns is resized
$('.container').resize(function () {
equalHeight();
});
});
</script>
</body>
</html>Output:
In the above code, the div element is used with some sub elements. Next, first the default height of each column set, then find the max height of the columns and then set the max height as the equal height for the each element of the div element as $( ‘.col’ ).css(‘height’, maxHeight);”, by using div class. As a result the equal height for all the columns is set to max height, as we can see in the above output.
Example #2
Example of jQuery equal height to set the equal height of all selected element for div element by using flexbox.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery equal height function </title>
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<style>
.container
{
width: 80%;
margin: 0 auto;
}
.col
{
float: left;
width: 33.3%;
}
.c1
{
background-color: #FF0000;
}
.c2
{
background-color: #FFFF00;
}
</style>
</head>
<body>
<script>
function disp()
{
// the maximum height is set to each height of column
$( ".container" ).css({
"display" : "flex",
"width" : "60%"
});
$( ".col" ).css({
"flex" : "1"
});
}
</script>
</head>
<body>
<h3> This an example of equal height : </h3>
<div class="container">
<div class = "col c1"> The List of Vegetables are :
<ol>
<li> Corn </li>
<li> Mushroom </li>
<p> Some more vegetables will be add soon. </p>
</ol>
</div>
<div class = "col c2"> The List of Fruits are :
<ol>
<li> Apple </li>
<li> Banana </li>
<li> Cherry </li>
<li> Pome </li>
<p> Some more fruits will be add soon. </p>
</ol>
</div>
</div>
<br><br><br>
<br><br><br>
<br><br><br>
<button onclick = "disp()"> Reset the equal height of eech column </button>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, the div element is used with some list of elements. Next, when we click on the button the css() function set the equal height for each element of the div element by using the flexbox. As a result the equal height for all the columns is set, as we can see in the above output.
Conclusion
The jQuery equal height is used to makes exactly equal height of all children elements of a parent container by using the CSS function.
Recommended Articles
This is a guide to jQuery equal height. Here we discuss the introduction, working of jQuery equal height and examples respectively. You may also have a look at the following articles to learn more –
