Laraskan ketinggian kandungan boleh tatal secara dinamik (Halaman Ion, React)

Question

Andaikan anda mempunyai beberapa teks dalam halaman Reaksi ionik anda yang sangat besar, jadi anda mahu ia menatal daripada mengisi keseluruhan halaman, maka gaya berikut akan banyak membantu:

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

Tetapi katakan, saya mempunyai halaman dengan beberapa kandungan dan pengaki, seperti ini:

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

Pada mudah alih ia kelihatan seperti ini:

Sila ambil perhatian bahawa kandungan perihalan tidak boleh ditatal kerana ketinggian dev tidak terhad. Masalahnya ialah, kita perlu menentukan "tinggi maksimum" tetapi kita tidak boleh melakukannya kerana saiz halaman akan berbeza-beza antara peranti yang berbeza dan ia bergantung pada ketinggian pengaki.

Ada cadangan? Ini nampaknya soalan biasa tetapi saya tidak dapat mencari jawapannya.

Saya mencuba ini:

  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>

Ini hanya berfungsi apabila saya memuat semula halaman, kerana pada pemuatan pertama, h2Heigth 和 itemHeight semuanya muncul sebagai 0

Answer 1

Saya akhirnya menambah kelas css ini:

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

  p {
    margin-bottom: 3em;
  }
}

Kemudian dalam halaman saya:

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

Penjelasan: calc(100% - 60px) ialah ketinggian keseluruhan kandungan tolak semua kandungan kecuali kandungan skrol. (Jelas sekali, pengaki tidak dikira)

Ini berfungsi pada peranti sasaran saya. Walau bagaimanapun, ini adalah penyelesaian yang agak tidak memuaskan kerana ia rosak sebaik sahaja saya menambah kandungan pada halaman melainkan saya teringat untuk mengemas kini nilai perbezaan