AngularJS Material: 自定义组件中没有滚动条

Question

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

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

...除了 flex 滚动之外，一切都很好。 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

Answer 1

而不是定位 md-sidenav 标签，你可以做的是给 sidenav 高度，这样它就会有滚动条，相应地也有主要内容的高度。现在您可以使用 css 将新的 class 添加到 md-sidenav 为：

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

我将这些 classes 分别添加到 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

AngularJS Material: 自定义组件中没有滚动条

AngularJS Material: no scrollbar in custom components

css

angularjs

material-design

angularjs-material