Angular-material md-list-item 有时全屏高度答案

【问题标题】：Angular-material md-list-item full screen height sometimesAngular-material md-list-item 有时全屏高度
【发布时间】：2016-07-13 18:16:52
【问题描述】：

当附加点击操作时，每个列表项都会以全屏高度结束。它应该足够大以包含文本。

下面是一个最小的问题示例，显示了作为文件打开时的问题。

在 codepen - http://codepen.io/anon/pen/ZOaPVy - 中可以正常工作，并且当点击动作被移除时也可以正常工作。我在 Linux 的 chrome 浏览器中查看它。

<html>
<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
</head>
<body>
  <md-list ng-app="BlankApp">
    <md-list-item ng-click="null">
      <p> List item 1 </p>
    </md-list-item>
    <md-list-item ng-click="null">
      <p> List item 2 </p>
    </md-list-item>
  </md-list>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>

  <script type="text/javascript">
    angular.module('BlankApp', ['ngMaterial']);
  </script>

</body>
</html>

这是类似问题的更简化版本： Angular Material: Each md-list-item takes full page width and Sidenav have long scrollbar

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

我在 MacBook 上的 Chrome 和 Safari 中重现了这个非常奇怪的问题。它不会出现在 Firefox 中。

罪魁祸首似乎是md-list-item的_md-list-item-inner的100%高度

如果你把它添加到<head> 中，一切都会好起来的

<style>
  md-list-item._md-button-wrap>div.md-button:first-child ._md-list-item-inner {
    height: initial;
  }
</style>

【讨论】：