jQuery outerHeight() & 高度变化 flicker/fail on window resize to odd pixels

Question

我在一个页面上有两个并排的元素。一个元素具有固定大小 (100vh) – .hero-half – 另一个元素具有可变长度的文本 – .project-details .当流体文本容器延伸到比图像容器高时，我想对其应用 class 以将其子元素之一的高度限制为 bing 总文本容器高度回到等于与图像高度。

HTML:

        <div class="project-details left">
          <h1 class="project">Title</h1>
          <div class="project-summary">
            <div class="summary-container">
              <p>A bunch of paragraphs here</p>
            </div>
            <a class="more" href="#">More</a>
            <a class="less" href="#">Less</a>
          </div>
        </div>
        <div class="hero hero-half right" style="background-image: url('/img/placeholder-vert1.jpg')"></div>

相关CSS：

.hero-half {
  width: 50%;
  height: 100vh;
}

.project-details {
  width: 50%;
  height: auto;
}

.project-summary .summary-container {
  overflow: hidden;

  &.restrict-height {

    .summary-container {
      // set max height
      max-height: calc(100vh - 615px);
    }
  }
}

这是我的 JS 代码：

$(function () {

  var bpTab = 1024;

  resize = function() {
    var winWidth = $(window).width();
    var heroHeight = $(".hero-half").outerHeight();
    var boxHeight = $(".project-details").outerHeight();
    var $box = $(".project-summary");

    if ( boxHeight > heroHeight && winWidth > bpTab) {
      // if on desktop layout AND if text is pusing box too big, restrict box height
      $box.addClass("restrict-height");
    } else {
      // if not on desktop or text is not pushing box too big
        $box.removeClass("restrict-height");
      $box.removeClass("is-expanded");
    }; 
  };

  // resize on window resize 
  $(window).bind("resize orientationchange", function(){
    resize(); 
  });

  // resize on page load
  resize();
});

因此，当项目详细信息 div 达到高于 .hero-half 的高度时，它会添加一个 class 来为其中一个子项设置最大高度，从而带来总.project-details 的高度回到等于或小于 .hero-half.

然而，当我调整 window 大小时强制文本将项目详细信息高度推得太高并触发限制高度 class，它仅在屏幕宽度和高度时有效加起来为偶数（宽度和高度均为偶数，或均为奇数）。如果总数是奇数，project-details 的 outerHeight 似乎计算不正确。

我认为，问题是 .project-details 的 outerHeight 有时会在其限制的文本高度之前的自然高度进行计算，有时会在应用 class 之后进行计算，并且在限制文本高度之后，因此将 .project-details 高度降低到可接受的范围内。

我尝试为添加 class 添加超时延迟，希望额外的时间意味着 outerHeight 计算始终正确，但这并没有什么不同。

我应该如何更改此 JS 代码以确保 .project-details outerHeight 始终在应用 restrict-height class 之前读取高度？

以及相关的：为什么奇数像素尺寸在这里有任何影响？

Answer 1

解决方案是在 if/else 循环之前添加一个重置以标准化 div 高度，移除可能首先改变其高度的额外类。

var $box = $(".project-summary");

// reset
$box.removeClass("restrict-height");
$box.removeClass("is-expanded");

var winWidth = $(window).width();
var heroHeight = $(".hero-half").outerHeight();
var boxHeight = $(".project-details").outerHeight();

jQuery outerHeight() & 高度变化 flicker/fail on window resize to odd pixels

jQuery outerHeight() & height change flicker/fail on window resize to odd pixels

javascript

css

jquery

flicker

outerheight