CODEWITHSUNDEEP
jqueryhtml
user3773599
user3773599

Reputation: 51

Set equal height to column wrapped in different div's

I am new to jQuery and don't have much idea about it.

Sorry If this is a repost. I got few example on stack overflow but the scenario was bit different.

Here is the HTML to understand what I am trying to achieve.

I want sections with same border to be of equal height (height is dynamic).

I can not change the HTML.

HTML

<div class="container">
  <div class="row">
    <div class="span6">
      <div class="sec1">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  
      </div>
      <div class="sec2">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  
      </div>
      <div class="sec3">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul> 
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        </ul>   
      </div>
    </div>
    <div class="span6">
      <div class="sec1">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
          <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>   
      </div>
      <div class="sec2">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul> 
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        </ul>   
      </div>
      <div class="sec3">
        <h3>Lorem ipsum dolor sit amet</h3>
        <ul> 
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

        </ul>   
      </div>
    </div>
  </div>
</div>

CSS

[class*="sec"] {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.sec2 {
  border-color: red
}
.sec3 {
  border-color: green
}

Upvotes: 3

Views: 152

Answers (5)

Zbyszek
Zbyszek

Reputation: 1492

You can try that - should work with window resize if you make those columns fluid / RWD and with different number of cells in columns and doesn't make all equal height, just row by row:

// to reset after window resize
function _resize_reset (columns_selector) {
  $(columns_selector+' > div').each(function () {
    $(this).css('height','auto');
  })
}

// to setup same heights of cells in both columns
function _resize (column1_selector, column2_selector) {
  var rows1 = $(column1_selector+' > div');
  var rows2 = $(column2_selector+' > div');
  var num = rows1.length < rows2.length ? rows1.length : rows2.length;
  for (var k = 0; k < num; k++) {
    var h1 = $(rows1[k]).height();
    var h2 = $(rows2[k]).height();
    if (h1 < h2) $(rows1[k]).css('height',h2+'px');
    else if (h1 > h2) $(rows2[k]).css('height',h1+'px');
  }
}

// update - to be run on start and on window resize
function _update_resize () {
  _resize_reset('span6');
  setTimeout(function () {
    _resize('.span6:nth-child(1)','.span6:nth-child(2)');
  },200);
}

// initiate it
$(function () {
  _update_resize();
  $(window).resize(_update_resize);
})

http://codepen.io/anon/pen/cKhfB

Upvotes: 0

Frank ZHENG
Frank ZHENG

Reputation: 109

Also try this one :

var height = 100;

var obj = $('#div1');
var obj2= $('#div2');

obj.height(height);
obj2.height(height);

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Use this :

$(function(){
    var sec2Ht=0;
   $('.sec2').each(function(){
     var sec2Ht1 = $(this).css('height');
     sec2Ht1 = sec2Ht1.replace('px','');
     if(sec2Ht1 > sec2Ht)
      sec2Ht = sec2Ht1;
   });

   $('.sec2').css('height',sec2Ht+'px');
});

Working Demo

Upvotes: 1

Tushar
Tushar

Reputation: 4418

You can do it like this

jQuery 

$(document).ready(function(){
  var maxHeight = -1;

  for (var secCount=0;secCount<4;secCount++){
    $('.sec'+secCount).each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.sec'+secCount).each(function() {
     $(this).height(maxHeight);
   });
  }

})

Upvotes: 4

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

Try like this:

var sec1 = $('.sec1').height();
var sec2 = $('.sec2').height();
if(sec1>sec2){
  $('.sec1,.sec2').css('height',sec1);
} else if(sec1<sec2){
  $('.sec1,.sec2').css('height',sec2);
}

Upvotes: 0

Related Questions