Question

我想使用md-list作为模板实现一些简单的聊天。问题是当我向md-list添加新项目（推送新消息）时，md-list正在增长。

我希望我的列表的行为与其他一些聊天类似，因此聊天高度是恒定的，与项目数量无关，并且聊天可在Y中滚动，因此，用户可以通过滚动查看较旧的消息。

我已经设定了这个：

    md-list{
  overflow-y: scroll;
}

并将聊天容器设置为某个最大高度值，但列表正在增长，并且超出了父级大小。

所以父母在init 400px的高度，也聊天。当我添加消息时，父节点的高度始终为400px，但聊天正在增长+ = message.height。

如何解决？我尝试添加max-height与聊天的初始高度相同，但这不起作用。

有什么想法吗？

Answer 1

将具有固定高度的类添加到md-list。

      <md-list class="fix-height">          
        <md-subheader class="md-no-sticky">3 line item (with hover)</md-subheader>
        <md-list-item class="md-3-line" ng-repeat="item in todos" ng-click="null">
          <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
          <div class="md-list-item-text" layout="column">
            <h3>{{ item.who }}</h3>
            <h4>{{ item.what }}</h4>
            <p>{{ item.notes }}</p>
          </div>
        </md-list-item> 
      </md-list>

CSS

.fix-height{
  max-height:200px;
  height:200px;
}

codepen here

MD-LIST恒定高度

1 个答案: