スクロール可能なコンテンツの高さを動的に調整する (Ion Page、React)

Question

ionic React ページに非常に大きなテキストがあるため、ページ全体を埋めるのではなくスクロールしたい場合は、次のスタイルが非常に役立ちます。

リーリー

しかし、たとえば次のようなコンテンツとフッターを含むページがあるとします。 リーリー

モバイルでは次のようになります:

dev の高さには制限がないため、説明の内容はスクロールできないことに注意してください。問題は、「最大高さ」を定義する必要があるのですが、ページ サイズはデバイスによって異なり、フッターの高さに依存するため、それができないことです。

＃＃＃助言がありますか？これはよくある質問のようですが、答えが見つかりません。

これを試してみました:

リーリー

これは、最初の読み込みでは

h2Heigth

と itemHeight の両方が 0 として表示されるため、ページをリロードする場合にのみ機能します。

Answer 1

最終的にこの CSS クラスを追加しました:

リーリー

次に、私のページで:

リーリー

説明: calc(100% - 60px) は、コンテンツ全体からスクロール コンテンツを除くすべてのコンテンツを引いた高さです。 (明らかに、フッターは考慮されません)

これは私のターゲットデバイスで動作します。ただし、これは、diff 値を更新することを忘れていない限り、ページにコンテンツを追加するとすぐに壊れてしまうため、かなり満足のいく解決策ではありません。