Smart Learning Tutorials

Online Tutorials Library

JavaScript

Equal DIV Height jQuery | How To Create Equal Height DIV

admin

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
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

<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>

JavaScript

$(function(){
    function equalHeight(){
        var heightArray = $(".sameHeight").map( function(){
            return  $(this).height();
        }).get();
        var maxHeight = Math.max.apply( Math, heightArray);
            $(".sameHeight").height(maxHeight);
        }
    equalHeight();
});

Example

<!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="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="jquery-3.3.1.slim.min.js"></script>
    <script src="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>

There are tons of equal height solutions out there, the easiest one is to use CSS as follows:

CSS Flexbox


.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

<p>Equal Height Columns using CSS Flexbox</p>

<div class="col-container">
  <div class="col"></div>
</div>

CSS display: table

.col-container {
  display: table;
  width: 100%;
}
.col {
  display: table-cell;
  padding: 16px;
}

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 DIV’s equal height jQuery

What Is Equal Height

Grid Layout is the most popular layout system in moment’s web design. It helps inventors organize and arrange web content in neat layout design. Still, the problem is that the length of the content in each grid item isn’t the same. This may disrupt your layout and beget your runner to be cluttered. When you are developing a ultramodern web operation, you might need to make grid particulars have the same height no matter how numerous content is placed in them.
Equal Height is such a web technology that makes all children rudiments( columns) of a parent vessel equal in height.

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.

You May Also Like

Add .active class to current menu based on URL

admin

How to redirect page on button click event in JavaScript?

admin

jQuery Add/Remove class on Mouseover/Mouseout

admin