angularjs - 为什么 md-tab-body 不能跨越整个屏幕

Question

我正在尝试使用 Angular Material 在 AngularJS 中实现选项卡。

我有一些标签。单击选项卡时，应显示特定于该选项卡的内容。但我面临的问题是，该选项卡的内容并未占据整个设备长度。

<md-tabs md-selected="selectedIndex">
    <md-tab md-on-select="onTabSelected(tab)" md-on-deselect="announceDeselected(tab)" ng-disabled="tab.disabled">
        <md-tab-label>
            <p>Tab A</p>
        </md-tab-label>
        <md-tab-body>
            <p>Content of tab A</p>
            <div infinite-scroll="loadMore(tab.id)" infinite-scroll-disabled="busy">
                <div ng-repeat="p in products">
                    <div class="well">
                        <h3>{{p.id}}</h3>
                        <h5>{{p.cat_id}}</h5>
                    </div>
                </div>

                <div ng-show="busy">Loading more products....</div>

            </div>
        </md-tab-body>
    </md-tab>
</md-tabs>

“md-tab-body”指令指定标签内容。

在上面的代码中，我只是打算将 ng-Infinite 滚动实现为选项卡内容的一部分。但不知何故，选项卡内容只占页面长度的一部分。 有什么解决方案可以让标签内容占据页面的整个长度。

Answer 1

我不确定这个问题是否还有其他解决方案，但最简单的方法是在 md-tabs 指令上使用 md-dynamic-height 属性。

<md-tabs md-dynamic-height>
.....
</md-tabs>

这就是您所需要的!