Ajuster dynamiquement la hauteur du contenu défilant (Ion Page, React)

Question

Supposons que votre page ionic React ait un texte très volumineux, vous souhaitez donc qu'il défile plutôt que de remplir toute la page, alors les styles suivants vous aideront beaucoup :

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

Mais disons que j'ai une page avec du contenu et un pied de page, comme ceci :

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

Sur mobile, cela ressemble à ceci :

Veuillez noter que le contenu de la description ne peut pas défiler car la hauteur de développement n'est pas limitée. Le problème est que nous devons définir une "hauteur maximale", mais nous ne pouvons pas le faire car la taille de la page varie entre les différents appareils et dépend de la hauteur du pied de page.

Des suggestions ? Cela semble être une question courante mais je ne trouve pas de réponse.

J'ai essayé ceci :

  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>

Cela ne fonctionne que lorsque je recharge la page car au premier chargement, h2Heigth 和 itemHeight s'affichent tous comme 0

Answer 1

J'ai fini par ajouter cette classe CSS :

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

  p {
    margin-bottom: 3em;
  }
}

Puis dans ma page :

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

Explication : calc(100% - 60px) est la hauteur de l'ensemble du contenu moins tout le contenu à l'exception du contenu défilant. (Évidemment, les pieds de page ne comptent pas)

Cela fonctionne sur mon appareil cible. Cependant, c'est une solution plutôt insatisfaisante car elle se brise dès que j'ajoute du contenu à la page, à moins que je ne me souvienne de mettre à jour la valeur diff