Equal div height jquery
Learn how to create equal height columns with javascript code to make equal height of similar type of div. without setting min-height you can fix the equal height of the div.
If you sre setting min-height using css, you have to set min-height in all different media queries according to look wise.
Instead of min-height use equalHeight(); function.

To Create Equal div height jquery it takes following steps:-
- Include the sameHeight class to all div or which div want to be in same height.
- Write a javascript function for equal height.
- Html
- JavaScript
- Example
<div class="col-sm-4"> <div class="servicesBox sameHeight"> <div class="circleImg"><i class="fa fa-child" aria-hidden="true"></i></div> <h4>Anyone Can Become Affiliate</h4> <p>Are you a blogger?</p> <span>Learn More</span> </div> </div> <div class="col-sm-4"> <div class="servicesBox sameHeight"> <div class="circleImg"><i class="fa fa-child" aria-hidden="true"></i></div> <h4>Anyone Can Become Affiliate</h4> <p>Are you a blogger?</p> <span>Learn More</span> </div> </div> <div class="col-sm-4"> <div class="servicesBox sameHeight"> <div class="circleImg"><i class="fa fa-child" aria-hidden="true"></i></div> <h4>Anyone Can Become Affiliate</h4> <p>Are you a blogger?</p> <span>Learn More</span> </div> </div>
$(function(){ function equalHeight(){ var heightArray = $(".sameHeight").map( function(){ return $(this).height(); }).get(); var maxHeight = Math.max.apply( Math, heightArray); $(".sameHeight").height(maxHeight); } equalHeight(); });
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <title>Hello, world!</title> </head> <body> <div class="col-sm-4"> <div class="servicesBox sameHeight"> <div class="circleImg"><i class="fa fa-child" aria-hidden="true"></i></div> <h4>Anyone Can Become Affiliate</h4> <p>Are you a blogger?</p> <span>Learn More</span> </div> </div> <div class="col-sm-4"> <div class="servicesBox sameHeight"> <div class="circleImg"><i class="fa fa-child" aria-hidden="true"></i></div> <h4>Anyone Can Become Affiliate</h4> <p>Are you a blogger?</p> <span>Learn More</span> </div> </div> <div class="col-sm-4"> <div class="servicesBox sameHeight"> <div class="circleImg"><i class="fa fa-child" aria-hidden="true"></i></div> <h4>Anyone Can Become Affiliate</h4> <p>Are you a blogger?</p> <span>Learn More</span> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ function equalHeight(){ var heightArray = $(".sameHeight").map( function(){ return $(this).height(); }).get(); var maxHeight = Math.max.apply( Math, heightArray); $(".sameHeight").height(maxHeight); } equalHeight(); }); </script> </body> </html>
How To Create Equal Height DIV using CSS
<div class="row d-flex justify-content-center"> <div class="col-md-6 d-flex align-items-stretch"> content to go here... </diV> <div class="col-md-6 d-flex align-items-stretch"> content to go here... </diV> <div class="col-md-6 d-flex align-items-stretch"> content to go here... </diV> </div>
If you are using bootStrap framework then you have to just add
d-flex justify-content-center and
d-flex align-items-stretch class in your DIV only.
Two divs equal height jquery
In this tutorial we learn that how to manage the equal height of column without using the min-height setting in css.
You can customize this code further as per your requirement.