AngularJS Material：自定义组件中没有滚动条答案

【问题标题】：AngularJS Material: no scrollbar in custom componentsAngularJS Material：自定义组件中没有滚动条
【发布时间】：2018-07-02 03:51:16
【问题描述】：

最近我发现了 AngularJS Material 框架，现在我正在尝试使用它。我第一次发现没有类似的线程所以我敢问。当我像这样添加自定义组件时：

<body ng-app="katalogApp" layout="column">
    <katalog></katalog>
</body>

...除了弹性滚动之外，一切都很好。直接在App中粘贴组件模板后：

<body ng-app="katalogApp" layout="column">
    <div layout="row" flex>
        <md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp" layout="column">
    it has a scrollbar
        </md-sidenav>
        <md-content flex>
            content
        </md-content>
    </div>
</body>

...它可以工作，但这太脏了。如果我添加css：

md-sidenav {position:fixed!important}

到容器 - 有一个滚动条，但内容放错了位置。如果有人知道如何处理它，我将不胜感激。

Here's a plunker

【问题讨论】：

标签： css angularjs material-design angularjs-material

【解决方案1】：

您可以做的不是定位 md-sidenav 标记，而是给 sidenav 指定高度，这样它就会有滚动条，并相应地对主要内容也有高度。现在您可以使用 css 向 md-sidenav 添加新类：

.leftSideNav {
  height: 100vh;
}
.content {
  height: 100vh;
  padding: 7px;
}

我将这些类分别添加到 md-sidenav 和 md-content 的位置：

<body ng-app="katalogApp" layout="column">
    <div layout="row" flex>
        <md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp leftSideNav" layout="column">
    it has a scrollbar
        </md-sidenav>
        <md-content flex class="content">
            content
        </md-content>
    </div>
</body>

Plunker Example

【讨论】：