假设您的 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
我最终添加了这个 css 类:
然后在我的页面中:
说明:
calc(100% - 60px)
是整个内容减去滚动内容之外所有内容的高度。 (显然,页脚不算)这适用于我的目标设备。然而,这是一个相当不令人满意的解决方案,因为一旦我向页面添加内容,它就会中断,除非我碰巧记得更新差异值