使用 md-virtual-repeat 和 md-virtual-repeat-container 的可折叠组头

Question

我正在尝试使用 md-virtual-repeat 实现显示可折叠分组作为概念证明，并且在根据内部内容设置高度时遇到问题，就像使用虚拟重复项一样。我创建了 codepen 示例来说明问题。任何基于 CSS 或 angularJs 的解决方案将不胜感激。

http://codepen.io/pyella/pen/XpXaEJ

编辑 1： 我正在尝试这个概念证明来实现无限滚动以呈现固定的 dom 元素，因为我的列表可能包含非常大的数字（要呈现 10000 个 DOM 元素），这可能会导致性能和CPU 问题和这个概念证明，任何使用 Angular 渲染大量数据的人都可以使用 Angular 材质并避免性能问题。

注意：请单击显示的年份之一以显示月份包装容器。目前高度被硬编码为 250 像素，并且 100% 的高度不显示月份包装容器。

如果月份包装高度未注释，则不会显示月份包装

.virtualRepeatdemoScrollTo #months-wrapper {
 /* height: 100%;*/
  /*position: initial;*/
}

.virtualRepeatdemoScrollTo .md-virtual-repeat-container {
  height: 250px;
}

Answer 1

我不确定这是否是您想要实现的，但这里是编辑过的 codepen：http://codepen.io/anon/pen/zNBrJg

我加了

.md-virtual-repeat-scroller{
  position: initial !important;
}

它之前的position 是absolute，这就是它的父级没有调整高度的原因。

我还从.virtualRepeatdemoScrollTo #vertical-container 选择器中删除了height: 100% 规则。