Question

我正在尝试使用角度素材并使用md-tabs，但是当应用md-dynamic-height选项卡加上内容（如果内容超出屏幕长度）时有一些原因。我只是滚动的内容无法弄清楚我做错了什么。这是我正在做的一个例子。

<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
<!--First Tab-->
<md-tab md-dynamic-height label="First INFO">
    <div class="">
        <div class="bold">

        </div>
        <hr />
        <img  src="images/map-pin.png" width="45" height="45" class="left up10" />
        <button class="btn-icon right up10"/>
            <img src="images/compose.svg" width="25" height="25" />
        </button>
        <span></span>
        <div >

        </div>
        <div style="clear: both"></div>
    </div>
</md-tab>
<!--Second Tab-->
<md-tab md-dynamic-height label="Second INFO">
    <div class="">
        <div class="bold">

        </div>
        <hr />
        <img  src="images/map-pin.png" width="45" height="45" class="left up10" />
        <button class="btn-icon right up10"/>
            <img src="images/compose.svg" width="25" height="25" />
        </button>
        <span></span>
        <div >

        </div>
        <div style="clear: both"></div>
    </div>
</md-tab>
<!--Third Tab-->
<md-tab md-dynamic-height label="Third INFO">
    <div class="">
        <div class="bold">

        </div>
        <hr />
        <img src="images/map-pin.png" width="45" height="45" class="left up10" />
        <button class="btn-icon right up10"/>
            <img src="images/compose.svg" width="25" height="25" />
        </button>
        <span></span>
        <div >

        </div>
        <div style="clear: both"></div>
    </div>
</md-tab>

Answer 1

示例布局：

<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content>
    <md-tab label="1">
        <md-content style="height:100%">
         tab content here
        </md-content>
    </md-tab>
    <md-tab label="2">
        <md-content style="height:100%">
         tab content here
        </md-content>
    </md-tab>
    <md-tab label="3">
        <md-content style="height:100%">
         tab content here
        </md-content>
    </md-tab>
</md-tabs>

Answer 2

在md标签中尝试md-dynamic-height=""

<md-tabs md-dynamic-height="">

Angular Material md-tabs：设置md-dynamic-height导致选项卡滚动而不是内容

2 个答案: