檢測偏移量

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-文檔