サイドナビ内の固定ボトムdivを持つmd-sidenav内のmd-listの高さを定義する方法

Question

固定divを持つmd-sidenav内のmd-listの動的高さを定義しようとしていますリストの上に、リストをフィルタリングするためのいくつかの入力と、フッタの固定されたボタン、md-sidenavの中のすべてのコンポーネントがあります。

+ SideNav  + 
+++++++++++++++ 
+ Toolbar  + 
+-------------+ 
+ Filter Div + => this must have fixed height (max-height=150px) 
+-------------+ 
+ md-list  + => this list must fill all space between the filter div and 
+    +  the button div, applying some scroll bars if the number 
+    +  of elements force the height to be greather than screen. 
+    + 
+-------------+ 
+ Button Div + => this div must be fixed at the bottom of screen 
+++++++++++++++ 

md-listの高さを定義し、画面の下部にボタンdivを固定する方法は本当にわかりません。

コード：

<md-sidenav class="md-sidenav-left md-whiteframe-z2" 
      md-component-id="left" 
      ng-click="userCtrl.toggleList()" aria-label="Show User List" 
      md-is-locked-open="$mdMedia('gt-sm')"> 

    <md-toolbar layout="row" class="md-whiteframe-z1"> 
     <h3>Users</h3> 
     <md-button class="md-icon-button" aria-label="Filtro" style="top: 12px;" 
        ng-click="userCtrl.searching = !userCtrl.searching"> 
      <md-icon md-svg-icon="assets/svg/find.svg"></md-icon> 
     </md-button> 
    </md-toolbar> 

    <div layout="column"> 
     <div class="md-whiteframe-z1" layout-padding> 
      <div layout="row"> 
       <md-checkbox ng-model="userCtrl.filterData.android"> 
        Android 
       </md-checkbox> 
       <md-checkbox ng-model="userCtrl.filterData.ios"> 
        iOS 
       </md-checkbox> 
      </div> 
      <div layout="column"> 
       <md-input-container class="md-block"> 
        <label>Email</label> 
        <input ng-model="userCtrl.filterData.username"> 
       </md-input-container> 
      </div> 
     </div> 

     <md-list> 
      <md-list-item ng-repeat="it in userCtrl.users"> 
       <md-button id="{{it.objectId}}" style="text-transform: none;" ng-click="userCtrl.selectUser(it)" 
          ng-class="{'selected' : it === userCtrl.selected }"> 
        <md-icon id="active-ios" md-svg-src="assets/svg/iphone.svg" 
          ng-if="it.device == 'ios'"></md-icon> 
        <md-icon id="active-android" md-svg-src="assets/svg/android.svg" 
          ng-if="it.device == 'android'"></md-icon> 
        {{it.username}} 
       </md-button> 
      </md-list-item> 
     </md-list> 

     <div class="md-whiteframe-z1"> 
      <md-button ng-click="userCtrl.loadMore()">Carregar Mais...</md-button> 
     </div> 
    </div> 
</md-sidenav> 

Answer 1

次のリンクをチェックアウト。

http://codepen.io/next1/pen/pyaJWR

<md-content layout="row" layout-fill> 
<md-sidenav class="md-sidenav-left" aria-label="Show User List" md-is-locked-open="$mdMedia('gt-sm')" style="background-color:red"> 

    <md-toolbar layout="row" class="md-whiteframe-z1" layout-align="center center"> 
    <h3>Users</h3> 
    <md-button class="md-icon-button" aria-label="Filtro" style="top: 12px;" ng-click="userCtrl.searching = !userCtrl.searching"> 
     <md-icon md-svg-icon="assets/svg/find.svg"></md-icon> 
    </md-button> 
    </md-toolbar> 

    <div layout="column" class="md-whiteframe-z1" layout-padding> 
    <div layout="row"> 
     <md-checkbox ng-model="userCtrl.filterData.android"> 
     Android 
     </md-checkbox> 
     <md-checkbox ng-model="userCtrl.filterData.ios"> 
     iOS 
     </md-checkbox> 
    </div> 
    <div layout="row"> 
     <md-input-container class="md-block"> 
     <label>Email</label> 
     <input ng-model="userCtrl.filterData.username"> 
     </md-input-container> 
    </div> 
    </div> 

    <md-content flex> 
    <md-list layout-fill layout-align="center center"> 
     <md-list-item ng-repeat="it in [1,2,3,4,5,6,7,8,9,0]"> 
     <md-button flex> {{it}} </md-button> 
     </md-list-item> 
    </md-list> 
    </md-content> 

    <md-button ng-click="userCtrl.loadMore()">Carregar Mais...</md-button> 
</md-sidenav> 
<md-content layout="column" style="background-color:yellow" layout-fill> 
    <div flex> 
    Main Content 

    </div> 
</md-content> 

敵私はいくつかのスタイリングクラスを削除簡素化。私はそれらを追加することはあなたのためのトラブルではないと確信しています。