如何使 ion-card 具有固定的 ion-card-header 和可滚动的 ion-card-内容？

Question

就像这个问题一样，我需要让我的 ion-card 可滚动并固定 ion-card-header，类似于 ion-header 和 [=28= 发生的情况].

我将此 css 代码放入我的页面：

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

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

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

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

我无法通过互联网找到任何解决方案，有人可以帮忙吗？

Answer 1

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

您的 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;
}

您不需要对 header 应用固定的属性，因为默认情况下它应该保持固定。

How to make ion-card with fixed ion-card-header and scrollable ion-card-content?