angular material md-card 内容可滚动

Question

我有一个 md-card，它由 md-header 和可滚动的 md-card 内容组成。随着可滚动内容越来越高，header 由于某种原因变得越来越小。卡片的宽度可以改变，并且 header 可能会环绕成 2 或 3 行，因此 header 上的 min-height 不是解决方案。该问题存在于最新的 IE 和 Chrome，而非 FF。

单击 "Add 5 Rows" 按钮几次以查看 header 收缩

http://plnkr.co/edit/wgBKnXh7FSn1VLO8mST0?p=preview

<html>
    <head>
        <title>angular material</title>
        <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
    </head>
    <body ng-app="app" ng-controller="ctrl" layout="column" layout-fill>
        <md-card style="height: 200px; width: 500px">
            <md-card-header style="border-bottom: 1px solid grey">
                <md-card-header-text>
                    <span class="md-title">Long Header Long Header Long Header Long Header Long Header Long Header Long Header Long Header </span>
                </md-card-header-text>
            </md-card-header>
            <md-content-card style="overflow-y: auto" >
                <ul>
                    <li ng-repeat="x in getArray() track by $index"></li>
                </ul>

            </md-content-card>
        </md-card>
        <button style="width: 200px" ng-click="addRows()">
            Add 5 Rows
        </button>
        <!-- Angular Material Dependencies -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-aria.js"></script>
        <!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
        <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
        <script>
            var app = angular.module('app', ['ngMaterial']);

            app.controller("ctrl", function($scope) {
                $scope.rows = 0;
                $scope.addRows = function() {
                    $scope.rows += 5;
                };
                $scope.getArray = function() {
                    return new Array($scope.rows);
                };
            });
        </script>
    </body>
</html>

Answer 1

您只需将固定高度声明从 md-card 移动到 md-content-card - Plunker

标记

 <md-card style="width: 500px">
   <md-card-header style="border-bottom: 1px solid grey">
       <md-card-header-text>
          <span class="md-title">Long Header Long Header Long Header Long Header Long Header Long Header Long Header Long Header </span>
       </md-card-header-text>
   </md-card-header>
   <md-content-card style="height: 200px; overflow-y: auto" >
     <ul>
       <li ng-repeat="x in getArray() track by $index"></li>
     </ul>

   </md-content-card>
 </md-card>

angular material md-card 内容可滚动

angular material md-card with scrollable content

html

css

angular-material