Calculate div height

Question

I want to make two divs the same height. But one div is smaller one while one is taller. Can someone explain how I can make them always the same?

Have some code here:

$(function() {
  var a = $(.box1);
  var b = $(.box2);

  function calcHeight(a, b){
   if (a.height() > b.height()) {
    b.css("height", a);
   } else {
    a.css("height", b);
   }
  }

   calcHeight(a,b)

  $(window).on('resize', function(){
  calcHeight(a,b)
  })
})
<div class="flexcontainer"> ---rows are in flex-direction: row;
 <div class="row1"> --- boxes are one below other 
  <div class="box1"></div>
  <div class="box2"></div> 
 </div>
 <div class="row2"> 
  <div class="box3"></div> --- This box is full-height 
 </div> 
 <div class="row3"> --- boxes are one below other
  <div class="box4"></div> 
  <div class="box5"></div> 
 </div>
</div>

I want box5 and box2 to be always the same height.

Thanks!

You don't need JS for equal height divs. You can use CSS: http://stackoverflow.com/a/33815389/3597276 — Michael Benjamin, Dec 10 '16 at 12:56
As mentioned: b.css("height", a); is problem -> you are setting css height value to object it self, but you need height value, so: b.css("height", a.height()+'px'); and so on... — sinisake, Dec 10 '16 at 13:06
@Michael_B Well, as long as they are on 1 line :) ... which we don't know in this case — Asons, Dec 10 '16 at 13:16
If you post the markup and CSS, we will be able to provide a proper answer — Asons, Dec 10 '16 at 13:22
@LGSon I have some idea. How can I go through every box with specific class, look for biggest height, took height and put on every box? P. S. On every resize and reload too. THANK YOU!! — Bane, Dec 10 '16 at 15:30

score 1 · Answer 1 · answered Dec 10 '16 at 13:44

1

Maybe you can try the following :

$(function() {
  var a = $('.box1');
  var b = $('.box2');

  function calcHeight(a, b){
   var max_height = Math.max(a.height(), b.height())+'px';
   a.css('height', max_height);
   b.css('height', max_height);
  }

   calcHeight(a,b)

  $(window).on('resize', function(){
    calcHeight(a,b)
  })
})

<div class="flexcontainer"> ---rows are in flex-direction: row;
 <div class="row1"> --- boxes are one bolow other 
  <div class="box1"></div>
  <div class="box2"></div> 
 </div>
 <div class="row2"> 
  <div class="box3"></div> --- This box is full-height 
 </div> 
 <div class="row3"> --- boxes are one bolow other
  <div class="box4"></div> 
  <div class="box5"></div> 
 </div>
</div>

answered Dec 10 '16 at 13:44

Thomas Kim

226
1
6

@TklnTky Hm, I have some idea. How can i go through every box with specific class, look for highest box, took highest heigh and put it on every box? For every resize and reload too. THANK YOU! – Bane Dec 10 '16 at 15:27
Hmm .. add the same class to all your boxes, calculate the biggest height ( loop over all of them, store the biggest one ), and then apply this height to all your boxes. $('.box').each(function() { if(max_height < $(this).height()) { max_height = $(this).height(); } $('.box').css('height': max_height+'px'); – Thomas Kim Dec 10 '16 at 15:33
@TklnTky I have this code and min-height: 310px; in CSS $(function() { function setEqualHeight(className) { var max = 0; $(className).each(function( index ) { var current = $(this).height(); if (current > max) { max = current; } }); $(className).css('height', max + 'px'); } var boxUnit = '.box1'; $(window).on('load',setEqualHeight(boxUnit)); $(window).on('resize',setEqualHeight(boxUnit)); }) And it set me on reload on 1920px height: 310px; and this height is on every lower beakpoint. – Bane Dec 10 '16 at 16:04
@TklnTky While I have different min-heights for every breakpoint – Bane Dec 10 '16 at 16:05

Calculate div height

1 Answers1