Question

我遇到了离子4和角7滚动问题。

我具有以下结构：

<ion-grid>
    <ion-row>
      <ion-col>
       <ion-card>
        <ion-card-header>
         <!-- some content -->
        </ion-card-header>
        <ion-card-content>
         <ion-list>
          <!-- some ion-item -->
         </ion-list>
        </ion-card-content>
       </ion-card>
      </ion-col>

      <ion-col>
      </ion-col>
    </ion-row>
</ion-grid>

我使用以下以下scss代码在ion-card-content上应用滚动：

ion-card-content {
  max-height: calc(100% - #{50px});
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  ::-webkit-scrollbar {
    display: none;
  }
}

如果我在离子卡上应用以下scss代码，则滚动将不起作用：

ion-card {
  max-height: 100%;
}

如果我在离子卡上应用以下scss代码，则滚动可以工作，但是离子卡的大小仍然相同，并且当离子列表中没有离子项时，它将占据所有屏幕：< / p>

ion-card {
  height: 100%;
}

您知道执行滚动并保持高度取决于离子列表大小的任何方法吗？

（对不起，我的英语）

Answer 1

我通过在离子卡上设置以下CSS代码解决了该问题：

ion-card {
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

我还删除了ion-card-content元素，并在ion-list上应用了以下CSS代码：

ion-list {
  overflow: hidden;
  overflow-y: auto;
  ::-webkit-scrollbar {
    display: none;
  }
}

如何在不设置父级高度的情况下滚动离子卡内容

1 个答案: