Hello reader's if you are developing the website in which data is generated in div and height of them is not equal then you can sort out your problem from this blog.

In the scenario above, sometimes text matter in the div is not equal so height of both parallel div can't be same this will look very bad design on website. Now you use the javascript which will auto detect the height of the larger div and set the same height of other div.

So lets consider the html of the website as below:-

<section class="main">
  <article>Latine ancillae instructior eu quo. Vulputate constituam his et, at errem liberavisse vel. Vidit posse impetus eam ut, eam ea graece semper blandit. Quem debet debitis no has.</article>
  <article>Latine ancillae instructior eu quo. Vulputate constituam his et, at errem liberavisse vel. Vidit posse impetus eam ut, eam ea graece semper blandit. Quem debet debitis no has. </article>
  <article>Latine ancillae instructior eu quo. Vulputate constituam his et, at errem liberavisse vel. Vidit posse impetus eam ut, eam ea graece semper blandit. Quem debet debitis no has.</article>
  <article> Latine ancillae instructior eu quo. Vulputate constituam his et, at errem liberavisse vel. Vidit posse impetus eam ut, eam ea graece semper blandit. Quem debet debitis no has.</article>
  
    <article>Latine ancillae instructior eu quo. Vulputate constituam his et, at errem liberavisse vel. Vidit posse impetus eam ut, eam ea graece semper blandit. Quem debet debitis no has.  </article>
  <article>Latine ancillae instructior eu quo. Vulputate constituam his et, at errem liberavisse vel. Vidit posse impetus eam ut, eam ea graece semper blandit. Quem debet debitis no has. </article>
  <article>Latine ancillae instructior eu quo. Vulputate constituam his et, at errem liberavisse vel. Vidit posse impetus eam ut, eam ea graece semper blandit. Quem debet debitis no has.</article>
  <article>Latine ancillae instructior eu quo. Vulputate constituam his et, at errem liberavisse vel. Vidit posse impetus eam ut, eam ea graece semper blandit. Quem debet debitis no has. </article>
</section>




<div style="clear:both;" class="container">  
  	<section class="pattern-description">
			<h1 style="font-size: 2.5em;">Responsive Equal Height Rows</h1>
      <p>This pattern is a fork of a </p>
      <p>To adapt this pattern for responsive use I placed it into a function and called it each time the window was resized. One note is that you must reset the div heights before you take a new measurement.</p>
			<h3>Pros</h3>
			<ul>
			<li><strong>The Equal Height Rows Designers Crave</strong> - If a desiger uses a box, those boxes better line up or they lose their Adobe license. Really!</li>
			<li><strong>Seperate heights for each row</strong> - Each row's height is calculated seperately, which works better for multi row layouts.</li>
			<li><strong>Light</strong> - This is a pretty short script and could be omitted from your mobile, one column layout.</li>
			</ul>
			<h3>Cons</h3>
      <ul>
   
			</ul>
      
      </section>
 </div> 	

Now we will write code for its script, which will go like this:-

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.main article');
});


$(window).resize(function(){
  equalheight('.main article');
});

Here the method window.resize will auto set the hight of all the div equal. Now you add some css to it and make more pretty, Which will go like this:-

article {
  float: left;
  width: 23%;
  background: #ccc;
  margin: 10px 1%;
  padding: 1%;
}

@media all and (max-width: 900px) {
article {
    width: 48%
  }

On loading the website first the content will load into their div and then jquery will decide the max height of all the div and set it to all div. This will go so fast that user will see any changes on the div height.