Angular material AngularJS材质选项卡高度问题

我在用AngularJS材料解决问题时遇到了一些麻烦，我想知道是否有人知道为什么会出现这段愚蠢的代码：

<md-tabs layout-fill >

    <md-tab id="tab1">
        <md-tab-label>Item One</md-tab-label>
        <md-tab-body>

            <md-list>
                <md-subheader class="md-no-sticky">3 line item</md-subheader>
                <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">

                    <div class="md-list-item-text">
                        <h3>sdfs</h3>
                        <h4>sdfsd</h4>
                        <p>sdfsdf</p>
                    </div>
                </md-list-item>

            </md-list>
        </md-tab-body>
    </md-tab>

</md-tabs>

项目一
3行项目
可持续发展基金
自卫队
sdfsdf

在firefox上生成

和铬合金

---

很抱歉没有直接发布图片，我没有足够的声誉。

我认为在这种情况下，

布局填充

将无法按照您的意愿工作，因为md选项卡指定了标题和内容，而我认为您希望内容扩展以填充父级

---

您可能希望尝试将

md dynamic height

选项添加到

md tabs

指令中，该指令将强制角度材质为选项卡设置一致的高度。

您需要将属性“md dynamic height”传递给yr md tabs指令。 下面的代码可以正常工作

  <md-content layout="column">
      <md-tabs md-dynamic-height flex>

        <md-tab id="tab1">
          <md-tab-label>Item One</md-tab-label>
          <md-tab-body>
            <md-list>
              <md-subheader class="md-no-sticky">3 line item</md-subheader>
              <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">
                <div class="md-list-item-text">
                  <h3>sdfs</h3>
                  <h4>sdfsd</h4>
                  <p>sdfsdf</p>
                </div>
              </md-list-item>
            </md-list>
          </md-tab-body>
        </md-tab>

        <md-tab id="tab2">
          <md-tab-label>Item Two</md-tab-label>
          <md-tab-body>
            <md-list>
              <md-subheader class="md-no-sticky">3 line item</md-subheader>
              <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">
                <div class="md-list-item-text">
                  <h3>sdfs</h3>
                  <h4>sdfsd</h4>
                  <p>sdfsdf</p>
                </div>
              </md-list-item>
            </md-list>
         </md-tab-body>
        </md-tab>

  </md-tabs>   
 </md-content>

项目一
3行项目
可持续发展基金
自卫队
sdfsdf

项目二
3行项目
可持续发展基金
自卫队
sdfsdf

我也有类似的问题。虽然

md动态高度
解决了这个问题

您可以尝试使用：

<md-tabs md-dynamic-height>
  <md-tab>
    <md-tab-label>Tab label</md-tab-label>
    <md-tab-body>
      <md-content>The tab content</md-content>
    </md-tab-body>
  </md-tab>
</md-tabs>


标签
选项卡内容
如果您试图解决的问题是选项卡未占据全部可用高度：

据我所知，通过现有的md属性是不可能做到这一点的（我花了几个小时研究这个）

团队短期内不会对其进行修复（参见2016年6月10日ThomasBurleson的评论：）

以下是一种对我有效的解决方法：

确保每个父元素都具有
layout=“column”
和
layout fill
属性
（或
布局列
和
布局填充
类）。这包括
如果这与您的用例相关

有关通过组件路由器创建的自定义组件的重要说明：

在我的例子中，我的html结构是ng outlet->custom component->md card->md tabs

我将
layout=“column”
和
layout fill
添加到
和
，并将
layout=“column”
添加到
。但是，我找不到将它们添加到
（因为它是由Angular动态创建的）的方法，所以我最终要做的是将这段（有点粗糙的）代码添加到我的组件控制器（ES6）中，但即使编写ES5也应该可以理解：

现在还没有解决这个问题的办法……我爱你。非常感谢你。（是的，我们在2018年使用AngularJS，杀了我）@Baruch我能感觉到你的痛苦兄弟！
import template from './account.html';

export const accountComponent = {
    template: template,
    controller: accountController,
};

/*@ngInject*/
function accountController (accountService) {
    this.data = accountService.getAccountData();

    /*** THIS IS THE HACKY PART THAT SOLVED IT FOR ME: ***/
    this.$routerOnActivate = function () { // nextRoute
        const classes = document.querySelector('account-component').classList;
        classes.add('layout-column');
        classes.add('layout-fill');
    };
}