关键词：
【中文标题】带有 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;
【讨论】：
角材质sidenav动态高度
】角材质sidenav动态高度【英文标题】：Angularmaterialsidenavdynamicheight【发布时间】：2020-09-0613:18:13【问题描述】：我正在使用：Angular9.1.4和Angular/Material9.2.4对于我目前正在做的一个项目，需要在材质侧导航中创建动态组件。https://m... 查看详情
无法获得 angular-material md-sidenav 的 100% 高度
】无法获得angular-materialmd-sidenav的100%高度【英文标题】：Can\'tgetangular-materialmd-sidenavtobe100%height【发布时间】：2016-09-1700:29:18【问题描述】：我正在使用带有sidenav的angular2-material制作一个新的angular2应用程序。而且我这辈子都无法... 查看详情
带有 Angular Material 声明的 Angular 编译警告
】带有AngularMaterial声明的Angular编译警告【英文标题】：AngularCompilationWarningswithAngularMaterialDeclarations【发布时间】：2019-10-1809:45:44【问题描述】：我在安装AngularMaterial后尝试编译时遇到了一堆警告（无论是直接来自npm还是通过ngadd... 查看详情
无法在 Angular Material 表上设置高度。高度溢出容器
】无法在AngularMaterial表上设置高度。高度溢出容器【英文标题】：Can\'tsetheightonAngularMaterialtable..heightoverflowscontainer【发布时间】：2019-08-2612:41:18【问题描述】：我正在使用AngularMaterialtable，并且在强制桌子达到一定高度时遇到了... 查看详情
Angular Material 7 使用带有拖放功能的网格
】AngularMaterial7使用带有拖放功能的网格【英文标题】：Angularmaterial7usegridwithdraganddrop【发布时间】：2019-05-0913:57:59【问题描述】：我尝试在这两者之间进行混合https://material.angular.io/cdk/drag-drop/overview#reordering-lists还有这个https://mat... 查看详情
使用工具栏强制 Angular Material sidenav 容器填充高度
】使用工具栏强制AngularMaterialsidenav容器填充高度【英文标题】：ForceAngularMaterialsidenavcontainerwithtoolbartofillheight【发布时间】：2020-01-0202:46:39【问题描述】：我无法让AngularMaterialsidenav容器填充屏幕的高度。sidenav以及sidenav内容与适... 查看详情
带有 ControlValueAccessor 和 formControlName 的 Angular Material Datepicker [重复]
】带有ControlValueAccessor和formControlName的AngularMaterialDatepicker[重复]【英文标题】：AngularMaterialDatepickerwithControlValueAccessorandformControlName[duplicate]【发布时间】：2020-03-2415:29:34【问题描述】：我正在尝试将ControlValueAccessor与Angular 查看详情
Angular Material 2 md-sidenav-content 不占满高度
】AngularMaterial2md-sidenav-content不占满高度【英文标题】：AngularMaterial2md-sidenav-contentdoesnottakeupfullheight【发布时间】：2017-07-1420:47:52【问题描述】：我正在使用Angular材料2，我遇到了这个问题，其中md-sidenav-content只占用了内容的高度... 查看详情
Angular Material 表动态列
】AngularMaterial表动态列【英文标题】：AngularMaterialtabledynamiccolumns【发布时间】：2020-06-1020:40:26【问题描述】：我创建了mat-table组件，它通过我粘贴的数据生成动态列，但没有操作图标。<tablemat-table[dataSource]="data"class="mat-elevatio... 查看详情
Angular6 Material - 使用带有自定义 ErrorStateMatcher 的输入的 Stepper
】Angular6Material-使用带有自定义ErrorStateMatcher的输入的Stepper【英文标题】：Angular6Material-usingStepperwithInputwithacustomErrorStateMatcher【发布时间】：2019-01-2417:18:22【问题描述】：这看起来应该很简单......在步进器中，您正在收集信息，... 查看详情
Angular Material Table - 将动态背景颜色应用于一行（Angular 2+）
】AngularMaterialTable-将动态背景颜色应用于一行（Angular2+）【英文标题】：AngularMaterialTable-Applydynamicallybackgroundcolortoarow(Angular2+)【发布时间】：2019-04-2900:35:29【问题描述】：您好，我有一个Angular应用程序，它可以实时显示调度程... 查看详情
Angular 2 Material Input 动态更改占位符
】Angular2MaterialInput动态更改占位符【英文标题】：Angular2MaterialInputchangeplaceholderdynamically【发布时间】：2017-11-0214:45:38【问题描述】：我想动态更改输入占位符的文本。console.log已经给出了更新的字符串，但界面没有更新，所以保... 查看详情
如何使用 Angular Material 让 mat-sidenav-content 占据 100% 的高度
】如何使用AngularMaterial让mat-sidenav-content占据100%的高度【英文标题】：Howtogetmat-sidenav-contenttotake100%ofheightusingAngularMaterial【发布时间】：2019-11-0819:06:20【问题描述】：所以我有一个侧导航，似乎无法让它占据100%的高度。正如您在... 查看详情
在带有 @angular/cdk-experimental 的 Angular Material 2 表中使用虚拟滚动
】在带有@angular/cdk-experimental的AngularMaterial2表中使用虚拟滚动【英文标题】：UsingVirtualScrollinAngularMaterial2Tablewith@angular/cdk-experimental【发布时间】：2018-11-1410:05:41【问题描述】：我有一个表格显示这么多行，我想优化它的性能。我... 查看详情
如何使用 Angular-Material 获得全高侧导航
】如何使用Angular-Material获得全高侧导航【英文标题】：HowtogetafullheightsidenavwithAngular-Material【发布时间】：2014-12-2816:01:09【问题描述】：我正在使用Angular-Material并实现了SideNav菜单。当屏幕尺寸较小时，菜单被隐藏，当单击菜单... 查看详情
Angular Material MatChipList - 如何在动态 FormArray 上使用它？
】AngularMaterialMatChipList-如何在动态FormArray上使用它？【英文标题】：AngularMaterialMatChipList-howtouseitonaDynamicFormArray?【发布时间】：2019-04-0604:22:36【问题描述】：StackBlitz这是我的FormArray（变体）：this.productGroup=this.fb.group(name:\'\',varia... 查看详情
HTML Angular Material：在动态形成的表格中隐藏列
】HTMLAngularMaterial：在动态形成的表格中隐藏列【英文标题】：HTMLAngularMaterial:HideColumnsinadynamicallyformingtable【发布时间】：2021-11-1705:56:13【问题描述】：我想根据打开页面时发送到页面的ID值隐藏表中的列。我已经看到有一种方法... 查看详情
Angular Material Icon 不在带有 Cordova 的 Android 应用程序中居中
】AngularMaterialIcon不在带有Cordova的Android应用程序中居中【英文标题】：AngularMaterialIconnotcenteredinAndroidAppwithCordova【发布时间】：2019-07-2507:06:32【问题描述】：我正在编写一个Cordova应用程序，在我的代码中我有一个angularmaterialicon... 查看详情