cdk-virtual-scroll-viewport百分比宽高不生效问题求助

百分比单位的高度生效依赖于父元素的明确高度值，你的代码存在以下问题：

• .wrapper 设置了 height: 100%，但如果它的父元素（比如 <html>、<body>）没有设置固定高度，.wrapper 的实际高度会被计算为 0。
• cdk-virtual-scroll-viewport 的 height: 80% 是相对于 .wrapper 的高度计算的，当 .wrapper 高度为 0 时，滚动容器的高度也会变成 0，因此无法显示内容。
• 而 px 是固定单位，不需要依赖父元素高度，所以组件能正常渲染。

要让百分比高度生效，需要补全高度传递链：

1. 给最顶层的 html 和 body 设置高度：

html, body {
  height: 100%;
  margin: 0; /* 移除默认边距避免滚动条干扰 */
}

2. 如果 .wrapper 还有其他父容器，也要确保这些父容器设置了明确的高度（比如 height: 100%），保证高度能传递到 .wrapper。

这样 cdk-virtual-scroll-viewport 的百分比高度就能基于有效父元素高度计算，组件即可正常显示内容。

内容的提问来源于stack exchange，提问作者Kugesh Rajasekaran