具有 Angular Material 个动态高度选项卡的可滚动内容元素

Question

这个问题已经出现 l times during the evolution of Angular Material，但我无法使任何建议适用于 v1.0.5。整个页面（或 flex 容器）滚动，将选项卡移出视图。

如何实现可滚动的全高内容元素？

<div flex>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="one">
            <md-content class="md-padding">

Demo fiddle

合并 custom scrollbars 的额外业力。

Answer 1

我已经解决了。通过删除 dynamic-height 指令，然后使用绝对定位，它起作用了：

.tabs-wrapper {
    position: relative;
}
.full-size {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div ng-app="sandbox">
    <div flex class="tabs-wrapper">
        <md-tabs class="full-size" md-border-bottom>

Fiddle demo

get the child of a flex element to expand 需要绝对定位。

注意：fiddle演示中的高度不正确。我的项目没有出现这个问题。

Answer 2

将选项卡内容包裹在 div 内并为其指定最大高度。

<md-tab label="two">
        <md-content class="md-padding">
            <div class="tab-content">
                <h1 class="md-display-2">Tab Two</h1>
            <div>
        <md-content>
<md-tab>

和css部分

div.tab-content{
  max-height:350px;
}

Js-fiddle link

Answer 3

试试这个：

md-tabs-wrapper {
    position : fixed;
    width: 100%;
    z-index: 1;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}

md-tabs-content-wrapper {
    margin-top: 48px;
}

具有 Angular Material 个动态高度选项卡的可滚动内容元素

Scrollable content elements with Angular Material dynamic-height tabs

tabs

scroll

angularjs

angular-material