javascript - 检测 offsetTop 变化

Question

我有一个不能有滚动条的页面，因此所有内容都必须始终显示在 View 中。在下图中，您可以看到屏幕的基本设置，因此您可以得到它的表示。

因此，有两个 block (1 和 2)。第一个 (1) 是可扩展的，甚至可以根据内容不存在。该 block 的最大高度为 500px，我不支持移动设备，仅支持 iPad 和计算机。第二 block (2) 始终存在，无论如何。

问题是:如何根据 offsetTop 动态调整第二个 block 的大小？

主要是我试图通过 @ViewChild() 来处理它，但它并没有一直检测到变化，这使得页面超出了 View 区域。

这就是我尝试使用它的方式。

@ViewChild('block2') set offset(content: ElementRef) {
    content.nativeElement.style.maxHeight = `calc(100vh - ${this.offsetTop + 20}px)`;
}

很遗憾，我无法共享源代码，但我们将不胜感激任何想法。

第二 block 要一直监听offsetTop的变化，填充页面的底部空间。

Answer 1

您只需使用 css 即可处理此问题，无需使用 javascript(它会进行复杂且未优化的计算，但您的浏览器可以轻松处理)。相反，请使用 flexbox 。

index.html

<div id="container">
  <div class="expandable">
    I am expandable
  </div>
  <div>
    I am not
  </div>
</div>

index.css

#container {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Ensure your container takes the full screen */
  height: 100vh;
  width: 100vw;

  /* Here is the magic */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

#container > *:not([class="expandable"]) {
  flex-grow: 1;
}

现在，您可以通过编程方式设置可扩展 div 的高度，第二个将自动调整大小，而不会超出屏幕。

编辑

可能不会像这样完美地工作，您可能需要调整一两件事，具体取决于您的原始元素的工作方式。 flex-grow，当应用于 flex 子项(不是 flex 容器)时，将使子项自动扩展，以填充剩余空间。

这里有更多详细信息:MDN - Doc