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.