javascript - 如何使无序列表(ul)中的 ng-repeat 内容可滚动

Question

我有一个无序列表中的消息列表。我想给列表一个百分比高度，让它可以滚动。我尝试向 ul 添加一个高度属性，但它没有做任何事情。
JSFiddle:http://jsfiddle.net/3hq9ay42/1/
查看

<div ng-controller="MyCtrl">
    <h1>Chat</h1>
        <ul class="list-unstyled">
        <!-- List all messages -->
        <li class="col-xs-12 col-md-offset-4 col-md-4 chat-message" ng-repeat="message in chat_messages">
                <span ng-bind="message"></span>
            </div>
        </li>
    </ul>
</div>

控制者

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.chat_messages = ['a','b','c','a','b','c','a','b','c','a','b','c','a','b','c'];
}

Answer 1

使用 CSS 将高度设置为您想要的任何高度，但它必须比列表默认高度短，否则您将无法看到滚动条。

ul.list-unstyled {
    height: 100px;
    overflow-y: auto;
}