如何使用 ui-router 使 md-sidenav 具有全高？答案

【问题标题】：How to make md-sidenav to have full height with ui-router?如何使用 ui-router 使 md-sidenav 具有全高？
【发布时间】：2015-12-10 17:00:00
【问题描述】：

我正在使用最新的 Angular Material (1.0.0) 库，并且我试图让<md-sidebar> 面板在页面上拥有完整的可用空间高度。
只要在普通页面（没有 ui-router）上使用它，一切正常，但只要使用 ui-router，侧边栏就不会被拉伸到全长，而只占用覆盖其元素所需的空间。
看起来问题是由ui-router 添加的<ui-view> 元素引起的。一旦我手动删除此标签，侧边栏就会很好地拉伸到全长。
我已经尝试使用来自以前版本 Angular Material 库的建议：

为.ng-scope类设置height: 100%
将flex 和layout-fill 类添加到<ui-view> 元素

这些都不起作用。我们如何使侧边栏具有完整的可用高度？

我创建了 Plunker 来演示 issue

【问题讨论】：

标签： html css angularjs angular-material

【解决方案1】：

我将 .ng-scope 样式添加为 100% 样式，它对我有用。

.ng-scope{
  height: 100%;
}

工作代码here

【讨论】：

这是一个史诗般的失败......看起来我已经尝试了height: 100% 的解决方案，但没有成功。之后，我恢复了高度值并将layout-fill 添加到开始<div>，但没有尝试再次添加height:100%。确实，只要两个建议一起使用，解决方案就会起作用。谢谢@Cyril。