Passen Sie die Höhe scrollbarer Inhalte dynamisch an (Ion Page, React)

Question

Angenommen, Sie haben Text auf Ihrer ionischen React-Seite, der sehr groß ist und Sie möchten, dass er scrollt, anstatt die gesamte Seite auszufüllen. Dann helfen die folgenden Stile sehr:

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

Aber sagen wir mal, ich habe eine Seite mit etwas Inhalt und einer Fußzeile, etwa so:

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

Auf dem Handy sieht es so aus:

Bitte beachten Sie, dass der Beschreibungsinhalt nicht scrollbar ist, da die Höhe von dev nicht begrenzt ist. Das Problem besteht darin, dass wir eine „maximale Höhe“ definieren müssen, dies ist jedoch nicht möglich, da die Seitengröße zwischen verschiedenen Geräten unterschiedlich ist und von der Höhe der Fußzeile abhängt.

Irgendwelche Vorschläge? Dies scheint eine häufig gestellte Frage zu sein, aber ich kann keine Antwort finden.

Ich habe Folgendes versucht:

  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>

Dies funktioniert nur, wenn ich die Seite neu lade, da beim ersten Laden h2Heigth 和 itemHeight alle als 0 angezeigt werden

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) 是整个内容减去滚动内容之外所有内容的高度。 （显然，页脚不算）

这适用于我的目标设备。然而，这是一个相当不令人满意的解决方案，因为一旦我向页面添加内容，它就会中断，除非我碰巧记得更新差异值