動態調整可捲動內容的高度（Ion Page、React）

Question

假設您的 ionic React 頁面中有一些文字非常大，因此您希望它滾動而不是填充整個頁面，那麼以下樣式將有很大幫助：

<div  style={{ overflow: 'auto', flex: '1 1 auto', height: '200px'}}>
Some Text
</>

但是我們假設，我有一個包含一些內容和頁腳的頁面，例如像這樣：

<IonPage>
      <IonContent>
        <h2>Search Detail Page</h2>
        <IonItem>
          Some Search Result Details
        </IonItem>

        <h1> Description</h1>
        <div  style={{ overflow: 'auto', flex: '1 1 auto'}}>
          <p>This is the content that matters to me. I want this to scroll when this description gets so long, that the footer would start covering it</p>
          <p>Now let's put a whole lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: Now let's put a lot of text in this paragraph so we can demonstrate what happens if we have a long text. Repeat after me: </p>
        </div>
      </IonContent>

      <IonFooter>
        <IonToolbar>
          Some shiny footer content
        </IonToolbar>
      </IonFooter>
    </IonPage>

在手機上，它看起來像這樣：

請注意，描述內容不可捲動，因為 dev 的高度不受限制。問題是，我們需要定義一個“最大高度”，但我們不能這樣做，因為頁面大小會因不同設備而異，而且它取決於頁腳高度。

有什麼建議嗎？這似乎是一個常見問題，但我找不到答案。

我嘗試過這個：

  useEffect(() => {
    setTimeout(() => {
      const h2Height = document.querySelector('h2').clientHeight;
      const itemHeight = document.querySelector('ion-item').clientHeight;

      console.log('Header Height:', h2Height); // sadly, this is 0 at init time. But then works on reload
      console.log('Item Height:', itemHeight);


      if (descriptionRef.current) {
        descriptionRef.current.style.height = `calc(100% - ${h2Height + itemHeight}px - 2em)`;
      }
    }, 100); // we need this 100ms timeout, since otherwise the heights are not available and equals 0 at load time
  }, []);

//...
<h1> Description</h1>
<div ref={descriptionRef}>Some very long detailed description</div>

這僅在我重新載入頁面時有效，因為在第一次載入時，h2Heigth 和 itemHeight 都顯示為 0

Answer 1

我最終添加了這個 css 類別：

.scroll-content {
  max-height: calc(100% - 60px);
  overflow: auto;
  flex: 1 1 auto;

  p {
    margin-bottom: 3em;
  }
}

然後在我的頁面中：

<div className={'scroll-content'}>
  <p>{searchResult?.description}</p>
</div>

說明：calc(100% - 60px) 是整個內容減去捲動內容以外所有內容的高度。 （顯然，頁尾不算）

這適用於我的目標裝置。然而，這是一個相當不令人滿意的解決方案，因為一旦我向頁面添加內容，它就會中斷，除非我碰巧記得更新差異值