动态调整可滚动内容的高度（Ion Page、React）
假设您的 ionic React 页面中有一些文本非常大，因此您希望它滚动而不是填充整个页面，那么以下样式将有很大帮助：
<div style={{ overflow: 'auto', flex: '1 1 auto', height: '200px'}}>
Some Text
</>
但是我们假设，我有一个包含一些内容和页脚的页面，例如像这样：
<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>
在手机上，它看起来像这样：
请注意，描述内容不可滚动，因为 dev 的高度不受限制。问题是，我们需要定义一个“最大高度”，但我们不能这样做，因为页面大小会因不同设备而异，而且它取决于页脚高度。
有什么建议吗？这似乎是一个常见问题，但我找不到答案。
我尝试过这个：
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>
这仅在我重新加载页面时有效，因为在第一次加载时，h2Heigth 和 itemHeight 都显示为 0
