Question

最近，我发现了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

Answer 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

AngularJS材质：自定义组件中没有滚动条

1 个答案: