最近我发现了 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}
到容器 - 有一个滚动条，但内容错位了。如果有人知道如何处理它，我将不胜感激。
最佳答案
而不是定位 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>
关于css - AngularJS Material : no scrollbar in custom components，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51123178/