如何制作具有固定离子卡标题和可滚动离子卡内容的离子卡？

Posted 2023-03-13

【中文标题】如何制作具有固定离子卡标题和可滚动离子卡内容的离子卡？

【英文标题】：How to make ion-card with fixed ion-card-header and scrollable ion-card-content?

【发布时间】：2021-09-15 15:13:39

【问题描述】：

就像这个问题一样，我需要在固定 ion-card-header 的情况下使我的 ion-card 可滚动，就像 ion-header 和 ion-content 发生的情况一样。

我把这个 css 代码放在我的页面上：

ion-card
        height: 80%;
        width: 100%;
        overflow: scroll;

        ion-card-header
            margin-bottom: 10px;
        

我的 ion-card 现在可以滚动了，但是 ion-card-header 也可以滚动了，我希望它在我向下滚动时固定在卡片的顶部。

我还尝试在 ion-card-header css 块上添加“位置：固定”或“位置：粘性”，但没有任何变化。

我在互联网上找不到任何解决方案，有人可以帮忙吗？

【参考方案1】：

如果我正确理解了您的问题，您想要一张带有固定标题和滚动内容的卡片。

这不会发生在您的 CSS 中，因为您将 overflow: scrollable 应用于整个 ion-card 元素。您需要将它们分开。

所以你最终应该得到类似的东西（重构你认为最好的）：

ion-card 
   height: 80%;
   width: 100%;


ion-card > ion-card-content 
   height: 150px; //your height of content here
   overflow: scroll;

您不需要将固定属性应用到标题，因为它应该默认保持固定。