javascript - 通过更改内容找到 div 的最小高度，这样下面的页面就不会跳来跳去

Question

我有一个我正在开发的网页的推荐部分，它将使用 jQuery fadeIn() & fadeOut() 简单地循环浏览许多不同的推荐评论>

如果我不将部分的高度规定为设定的高度，那么高度将根据推荐评论的长度而变化，下面页面的其余部分将跳来跳去。

当我使用 Wagtail(基于 Django 的 CMS)创建这个网站时，我希望能够根据最长的推荐评论自动计算适当大小的部分高度。

这是我目前的代码:

HTML:

<section class="bg-primary testimonial-wrapper" id="testimonials">
          <div class="container">
            <div class="row">
              <div class="col-xs-2 col-xs-offset-2">
                <i class="fa fa-4x fa-quote-left"></i>
              </div>
              <div class="col-xs-6 testimonial-wrapper">
                <div class="testimonial-item">
                  <p>Testimonial comment 1.</p>
                  <p><em>- Oliver Nicholson</em></p>
                </div>
                <div class="testimonial-item">
                  <p>Another quote!</p>
                  <p><em>- Nollie Bollie</em></p>
                </div>
              </div>
            </div>
          </div>
        </section>

jQuery/JS:

$(document).ready(function() {

  var testimonials = $(".testimonial-item");
  testimonials.hide();
  var testimonialIndex = -1;

  function showNextTestimonial() {
    ++testimonialIndex;
    testimonials.eq(testimonialIndex % testimonials.length)
    .fadeIn(2000)
    .delay(500)
    .fadeOut(2000, showNextTestimonial);
  }

  showNextTestimonial();

});

有什么方法可以计算 testimonial-wrapper 的 min-height 以便 testimonial-wrapper 部分能够容纳每个从一个评论过渡到下一个评论时不改变大小的评论？

Answer 1

https://jsfiddle.net/seahorsepip/jztcnoah/

  //Get max height
  var wrapperHeight = 0;
  testimonials.each(function() {
    wrapperHeight = $(this).outerHeight() > wrapperHeight ? $(this).outerHeight():wrapperHeight;
  });
  //Set max height
  $(".testimonial-wrapper").height(wrapperHeight);