带有 Angular Material 动态高度标签的可滚动内容元素

Posted 2023-03-06

【中文标题】带有 Angular Material 动态高度标签的可滚动内容元素

【英文标题】：Scrollable content elements with Angular Material dynamic-height tabs

【发布时间】：2016-06-02 05:14:03

【问题描述】：

在Angular Material 的演变过程中，several times 提出了这个问题，但我无法让任何建议适用于 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 的奖励业力。

【问题讨论】：

非常重要的评论在页尾bountysource.com/issues/…

【参考方案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需要绝对定位。

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

【参考方案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

【讨论】：

这需要一个固定的高度，这对我没用。

【参考方案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;