Equalize Height of HTML Element With jQuery

Layout
Demo    Download
Equal Height of HTML Elelment In jQuery
File Size: 1.2 KB
Views Total: 121 views
Last Update:March 1, 2021
Publish Date: March 1, 2021
Official Website: Go to website
License: MIT
Plugin Author:

Equalize Height of HTML Element With jQuery, Equal height of div in html with jQuery. it is easy to use & light weight jQuery Script.

How to use :

Add jQuery Library in HTML page.

<script type="text/javascript" src="/cdn/jquery-1.12.4.min.js"></script>

You can add class with parent ‘.equal-height’ and child add CSS ‘child-li’.

<ul class="equal-height">
	<li class="child-li">
		<p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	</li>
</ul>

Add CSS for Equal Height.

.equal-height{
			padding: 0px;
			list-style-type: none;
		}
		.equal-height li {
			/*border: 1px solid red;*/
			width: 20%;
			float: left;
			box-sizing: border-box;
			color: #fff;
			box-sizing: border-box;
			padding: 10px;
		}
		.equal-height li:nth-child(even){
			background-color: red;
		}
		.equal-height li:nth-child(odd){
			background-color: blue;
		}

Add jQuery Script for Generate Equal Height for HTML element.

	jQuery(window).load(function(){
	    // Select and loop the container element of the elements you want to equalise
	    jQuery('.equal-height').each(function(){  
	      
	      // Cache the highest
	      var highestBox = 0;
	      
	      // Select and loop the elements you want to equalise
	      jQuery('.child-li', this).each(function(){
	        
	        // If this box is higher than the cached highest then store it
	        if(jQuery(this).height() > highestBox) {
	          highestBox = jQuery(this).height(); 
	        }
	      
	      });  
	            
	      // Set the height of all those children to whichever was highest 
	      jQuery('.child-li',this).height(highestBox);
	                    
	    }); 


	});

Done


guri singh

My name is Guri. I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.