How to define the height of a md-list inside a md-sidenav with fixed bottom div inside the side-nav
<p>I´m trying to define the dynamic height for a md-list inside a md-sidenav having a fixed div above the list, with some inputs to filter the list, and a fixed button on the footer, all components inside a md-sidenav.</p>

<pre><code>+ SideNav     +
+++++++++++++++
+ Toolbar     +
+-------------+
+ Filter Div  +   =&gt; this must have fixed height (max-height=150px)
+-------------+
+ md-list     +   =&gt; 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  +  =&gt; this div must be fixed at the bottom of screen
+++++++++++++++
</code></pre>

<p>I really don´t know how to define the height of the md-list and to fix the button div at the bottom of screen. </p>

<p>The code:</p>

<pre><code>&lt;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')"&gt;

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

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

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

        &lt;div class="md-whiteframe-z1"&gt;
            &lt;md-button ng-click="userCtrl.loadMore()"&gt;Carregar Mais...&lt;/md-button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/md-sidenav&gt;
</code></pre>