Angular material 设计 md-tab 滚动内容

Question

这可能是一个简单的问题，但我是新手...

我试图让 md-tabs 元素占据整个屏幕，并且只有选项卡的内容滚动。这是 jsFiddle

上的示例

有什么想法吗？谢谢！

Answer 1

尝试将此样式添加到 md-tab 内的 div 元素中：

div{    
  height: 100px; 
  overflow-y: scroll;
}

您的容器必须是固定大小的。此外，您还可以玩 overflow 属性。 Read this 获取更多信息。

谢谢

Answer 2

似乎这是 0.8.3 中的错误，现在已在 master 中修复（提交：74601d0）

Answer 3

试试这个：

<body ng-cloak layout="column" ng-controller="AppController as app">
    <md-toolbar layout="row" class="md-toolbar-tools">
        <h1>Welcome!</h1>
    </md-toolbar>
    <div layout="column" flex>
        <md-tabs md-stretch-tabs="always" flex>
            <md-tab label="Tab1">
                add our larger-than-life content here
            </md-tab>
            <md-tab label="Tab2">
            </md-tab>
       </md-tabs>
    </div>
</body>

将 flex 属性添加到 md-tabs 将使内部选项卡 (md-tab) 的内容可滚动。

Angular material 设计 md-tab 滚动内容

Angular material design md-tab scroll content

angularjs

material-design