我有一个 md-card，它由一个 md-header 和可滚动的 md-card-content 组成。随着可滚动内容越来越高，由于某种原因，标题变得越来越小。卡片的宽度可以改变，标题可以环绕成 2 或 3 行，因此标题上的最小高度不是解决方案。该问题存在于最新的 IE 和 Chrome 中，而非 FF。
点击“添加 5 行”按钮几次以查看标题缩小
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>
最佳答案
您只需将固定高度声明从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>
关于html - 具有可滚动内容的 Angular Material md-card，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37891708/