使用ng-repeat

Question

我正在使用ng-repeat来显示一些消息，而我正在尝试使“message_area”可滚动，因为消息会随着时间的推移自然地导致溢出，但我的代码无法按预期工作。

<div class="main_area">

  <div id = "message_area" ng-repeat = "message in selected_conversation_object.messages.slice().reverse()">
    <div class="message_container" ng-if = "message.sender != me._id">
      <div class="message_received">{{message.message}}</div>
    </div>
    <div class="message_container" ng-if = "message.sender == me._id">
      <div class="message_sent_by_me">{{message.message}}</div>
    </div>
  </div>

</div>

.main_area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 325px;
  right: 0;
  height: 100%;
  background: white;
}

#message_area {
  position: relative;
  overflow-y: scroll;
}

.message_container {
  position: relative;
  width: 100%;
  height: 30px;
}

.message_received {
}

.message_sent_by_me {
  position: relative;
  background-color: #0084FF;
  border-radius: 5px;
  width: 100px;
  color: white;
  float: right;
}

我无法理解为什么我的代码不起作用。

任何建议都将不胜感激。

Answer 1

您需要为min-height选择器设置#message_area。

#message_area {
   position: relative;
   min-height: 50px; // Add This.
   overflow-y: scroll;
}

Answer 2

使用滚动到您的.main_area。当数据超过给定高度时，它会使用y轴上的滚动条进行管理。

.main_area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 325px;
  right: 0;
  height: 100%;
  background: white;
  **overflow-y: scroll;**
}

工作Plunker。