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:

 Some Text 

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

  
Search Detail Page
  Some Search Result Details  
 Description
 
 
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
 
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: 
 
    Some shiny footer content   

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 }, []); //... 
 Description
 
Some very long detailed description

Dies funktioniert nur, wenn ich die Seite neu lade, da beim ersten Ladenh2Heigth和itemHeightalle als 0 angezeigt werden