Angular JS with Dialog，Tabs and fixed footer

Question

有一个问题，我尝试使用Angular Material，Tabs和一个对话框。

我在找什么，就是在里面显示一个标签对话框。其中，我希望第一个选项卡填充100％的高度（减去标签页眉，以及我添加的“页脚”类。

这是我开始的一个plnkr，但因为我不能获取列表项为占用所有的高度。

http://plnkr.co/edit/2szJQPaMfXF4utyQO1X1?p=preview

如果向下滚动选项卡上的1列表中，你会看到“页脚”，我会想不滚动的。该项目将固定在对话框的底部。

<md-dialog aria-label="Mango (Fruit)"> 
    <md-dialog-content> 
    <div class="md-dialog-content"> 
     <md-tabs> 
     <md-tab label="First Tab"> 
      <md-content flex> 
      <md-list flex> 
       <md-item ng-repeat="item in items"> 
       <md-item-content> 
        <div flex class="md-tile-content"> 
        {{item}} 
        </div> 
       </md-item-content> 
       <md-divider></md-divider> 
       </md-item> 
      </md-list> 
      </md-content> 
      <div class="footer"> 
      Footer should be at the bottom 
      </div> 
     </md-tab> 
     <md-tab label="Second tab"> 
      <md-list flex> 
      <md-item ng-repeat="item in items"> 
       <md-item-content>{{item}}</md-item-content> 
      </md-item> 
      </md-list> 
     </md-tab> 
     </md-tabs> 
    </div> 
    </md-dialog-content> 
</md-dialog> 

Answer 1

因此，我有一个soluti上，认为粘脚不能在每个标签内。虽然这有点违法，但我可以解决这个问题，并使用ng-if在需要时显示粘滞页脚。

如果任何人有关于如何在每个选项卡中粘滞页脚并按照第一个选项卡的方式行事的答案，那么对您和您的答复将被授予您的赞誉。

http://plnkr.co/edit/6bkgGW?p=preview

<md-dialog aria-label="Mango (Fruit)" layout="column" layout-fill> 
    <md-dialog-content layout="column" flex> 
    <md-tabs layout="column" flex> 
     <md-tab label="First Tab"> 
      <md-content> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      </md-content> 
      <div class="footer"> 
      Footer should be at the bottom 
      </div> 
     </md-tab> 
     <md-tab label="Second tab"> 
      <md-list> 
      <md-item ng-repeat="item in items"> 
       <md-item-content>{{item}}</md-item-content> 
      </md-item> 
      </md-list> 
     </md-tab> 
     </md-tabs> 
    </md-dialog-content> 

    <md-dialog-actions layout="row"> 
    <md-button ng-click="answer('useful')" style="margin-right:20px;"> 
     Useful 
    </md-button> 
    </md-dialog-actions> 
</md-dialog>