Question

我有像这样的html和脚本。我想要box1 box2盒子显示相同的高度。但是当我调整浏览器大小以进行检查时，最大高度不正确。

<div class="pro_intro>"
   <div class="box box1">
     something 1
   </div>
   <div class="box box2">
     something 2      
   </div>
   <div class="box box3">
     something 3
   </div>
</div>

$(window).on("resize", function () {
        var max = -1;
        $(".pro_intro .box").each(function() {  
            var h = $(this).outerHeight(); 
            max = h > max ? h : max;
        });
        $(".pro_intro .box").css("height",max);
        $(".pro_intro .box").css({'visibility':'visible'});
}).resize();

对此有任何建议。非常感谢你

Answer 1

为什么不使用CSS的height和max-height属性？

类似的东西：

.box1, .box2 { height: 100%; max-height: 300px; }

Answer 2

您当前代码的问题是您缺少<div class="pro_intro>的结束双引号，这会使您的代码无效，因此jQuery无法正常工作。

此外，您的脚本存在一个小的概念缺陷：您没有重置div的高度。这意味着.outerHeight()返回当前设置的高度（通过上一次迭代），而不是内容所需的高度（如果元素具有height:auto）。这是使用你的（错误的，恕我直言）方法的解决方法：

$(window).on("resize", function() {
  var max = -1;
  $(".pro_intro .box")
    .height('auto')
    .each(function() {
      max = Math.max(
        $(this).outerHeight(), 
        max
      );
    });
  $(".pro_intro .box").css({
    height: max + 'px',
    visibility: 'visible'
  });
}).resize();

.pro_intro .box {
  display: inline-block;
  float: left;
  width: 33.33%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pro_intro">
  <div class="box box1">
    something 1
  </div>
  <div class="box box2">
    something 2
  </div>
  <div class="box box3">
    something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3 something 3
    something 3 something 3 something 3
  </div>
</div>

我说“错误的方法”，因为我建议你不要使用JavaScript来完成这项任务。 resize上的绑定侦听器实际上是为了性能而要避免的。你至少应该限制它。

我会使用flexbox执行任务：

.pro_intro {
  display: flex;
  align-items: stretch;
}

以下是一个例子：

.pro_intro {
  display: flex;
  /* totally optional: 
    min-height: 35vh; 
  */
  justify-content: center;
  align-items: stretch;
}

.pro_intro>.box {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0,0,0,.1);
  flex-direction: column;
  margin: 0 .5rem;
  padding: 0 .75rem;
}
@media (max-width: 767px) {
  .pro_intro {
    flex-wrap: wrap;
  }
  .pro_intro .box {
    flex: 1 0 51%;
    margin: .5rem;
  }
}

<div class="pro_intro">
  <div class="box box1">
    <p>something 1
  </div>
  <div class="box box2">
    <p>something 2
  </div>
  <div class="box box3">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In nibh mauris cursus mattis molestie a iaculis at. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Donec pretium vulputate sapien nec. A pellentesque sit amet porttitor eget dolor morbi. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Dui id ornare arcu odio ut sem nulla pharetra. Massa vitae tortor condimentum lacinia quis vel eros donec ac. Arcu bibendum at varius vel pharetra vel. Et odio pellentesque diam volutpat. Tempus egestas sed sed risus pretium quam vulputate. Sed velit dignissim sodales ut eu sem integer. Sit amet risus nullam eget felis eget nunc lobortis.
  </div>
</div>

Answer 3

您缺少pro_intro div的结束引号。

试试这个

$(window).on("resize", function () {
    $(".pro_intro .box").each(function() {  
        $(this).css("height","");
    });
    var max = -1;
    $(".pro_intro .box").each(function() {  
        var h = $(this).outerHeight(); 
        max = h > max ? h : max;
    });
    $(".pro_intro .box").each(function() {  
    $(this).css({"height": max, "visibility": "visible"});
    });
});

Answer 4

尝试用下面的

替换你的jquery代码

 var max = -1;
        $(".pro_intro .box").each(function() {  
            var h = $(this).outerHeight(); 
            max = h > max ? h : max;
        });
        $(".pro_intro .box").css("height",max);
        $(".pro_intro .box").css({'visibility':'visible'});

https://jsfiddle.net/m3rs30tx/

无法在调整大小时获得maxheight

4 个答案: