book now on khaalipaper Best hindi blog and story website

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.

Equal div height jquery

To Create Equal div height jquery it takes following steps:-

  1. Include the sameHeight class to all div or which div want to be in same height.
  2. 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.