cdk-virtual-scroll-viewport高度等于页面高度（高度100％）

Question

尝试使 cdk-virtual-scroll-viewport 高度等于页面高度。

<div class="plServiceItemsList-list">
    <cdk-virtual-scroll-viewport class="plServiceItemsList-listViewPort" itemSize="20">

尝试使用高度 100％时，我看不到任何列表

.plServiceItemsList-listViewPort {
  height: 100%;
  min-height: 100%;
}

显示它的唯一方法是指定高度：

.plServiceItemsList-listViewPort {
  height: 100px;
}

但这不是动态的。

Answer 1

@Chellappan建议使用vh后，我以为我的问题已解决，但实际上，当页面大小大于屏幕大小时，它就会失败。

这是我使用的：

.plServiceItemsList-listContainer {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.plServiceItemsList-listViewPort {
  flex-grow: 1;
}