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

Question

试图让cdk-virtual-scroll-viewport高度等于页面高度。

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

尝试使用 height 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;
}