检测偏移量

Question

我的页面无法显示滚动条，因此所有内容必须始终显示在视图中。 在下面的图像中，您可以看到屏幕的基本设置，因此您可以获取它的表示。

因此，有两个块（1和2）。 第一个（1）是可扩展的，或者根据内容它甚至可能不存在。 该块的最大高度为500像素，我不支持移动设备，仅支持iPad和计算机。 无论如何，第二个块（2）一直存在。

问题是：如何基于offsetTop动态调整第二个块的大小？

主要是我尝试通过@ViewChild() ，但是它并不能一直检测到更改，这使页面超出了视图区域。

这就是我尝试使用的方法。

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

不幸的是，我无法共享源代码，但是任何想法将不胜感激。

第二个块必须一直侦听offsetTop的更改，并填充页面的底部空间。

Answer 1

您只需使用CSS即可处理此问题，而无需使用javascript（它会进行复杂且未经优化的计算，您的浏览器可以轻松处理）。 相反，请使用弹性框。

的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的高度，第二个div会自动调整大小，而不会超出屏幕范围。

编辑

可能无法像这样完美地工作，您可能需要调整一两件事，具体取决于原始项目的工作方式。 flex-grow应用于flex子级（而不是flex容器）时，将使子级自动展开以填充剩余空间。

此处有更多详细信息： MDN-文档