Question

我想让两个div的高度相同。但是一个div较小而一个较高。有人可以解释我怎么能让它们始终一样吗？

在这里有一些代码：

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

我希望box5和box2始终保持相同的高度。

谢谢！

Answer 1

也许您可以尝试以下方法：

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

计算div高度

1 个答案: