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