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

但这不是动态的。

- MCMatan

---

你是否已经厌倦了使用"100vh"这个单位？ - Chellappan வ

@Chellappan 谢谢！已经生效。 - MCMatan

Answer 1

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

这是我使用的代码：

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

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

- MCMatan

---

感谢@MCMatan的分享。我一直在使用@angular/flex-layout来填充视图中固定头部和页脚之间的垂直空间，所以我只是在flex容器内的滚动条上使用了fxFlex="grow"，就像你指出的那样！ - Larry King

@MCMatan 这个解决方案对我没用，listcontainer类只是一个包装在<cdk-virtual-scroll-viewport>周围的div吗？ - r0699049

不起作用。高度没有按预期更改。 - Igor Kurkov