title: How to get a full height sidenav with Angular-Material
body: <p>I am using Angular-Material and have implemented a SideNav menu. When the screen size is small, the menu is hidden and when click on the Menu toggle button, the menu slides out from the left, with a full page height. When the screen is larger, the menu appears fixed to the left side, but not at full page height.</p>
  
  <p>How can i make the fixed menu appear to be full page height.
  I have been playing with the css and other md attributes, but just can't find out how.</p>
  
  <pre><code>&lt;div ng-controller="appCtrl" layout="vertical" layout-fill&gt;
  
  &lt;md-toolbar class="md.medium-tall app-toolbar"&gt;
      &lt;div class="md-toolbar-tools" ng-click="toggleMenu()"&gt;
          &lt;button class="menu-icon" hide-sm aria-label="Toggle Menu"&gt;
              &lt;md-icon icon="img/icons/ic_menu_24px.svg"&gt;
                  &lt;object class="md-icon" data="img/icons/ic_menu_24px.svg"&gt;&lt;/object&gt;
              &lt;/md-icon&gt;
          &lt;/button&gt;
          &lt;h2&gt;
              &lt;span&gt;Dev.Material&lt;/span&gt;
          &lt;/h2&gt;
      &lt;/div&gt;
  &lt;/md-toolbar&gt;
  
  &lt;section layout="horizontal" flex&gt;
      &lt;md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$media('sm')"&gt;
  
          &lt;md-toolbar md-theme="purple"&gt;
              &lt;h1 class="md-toolbar-tools"&gt;Sidenav Left&lt;/h1&gt;
          &lt;/md-toolbar&gt;
  
          &lt;md-content class="md-padding" ng-controller="menuCtrl"&gt;
              &lt;p&gt;
                  This sidenav is locked open on your device. To go back to the default behavior,
                  narrow your display.
              &lt;/p&gt;
          &lt;/md-content&gt;
      &lt;/md-sidenav&gt;
  
      &lt;md-content flex class="md-padding"&gt;
          Some content !!
      &lt;/md-content&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>and the controller:</p>
  
  <pre><code>(function () { 
  'use strict';
  
  var controllerId = 'appCtrl';
  angular.module('app').controller(controllerId,
      ['$scope', '$timeout', '$mdSidenav', appCtrl]);
  
  function appCtrl($scope, $timeout, $mdSidenav) {
      var vm = this;
  
      $scope.toggleMenu = function() {
          $mdSidenav('menu').toggle();
      };
  };    
  })();
  
  (function () { 
  'use strict';
  
  var controllerId = 'menuCtrl';
  angular.module('app').controller(controllerId,
      ['$scope', '$timeout', '$mdSidenav', menuCtrl]);
  
  function menuCtrl($scope, $timeout, $mdSidenav) {
      var vm = this;
  
      $scope.close = function() {
          $mdSidenav('menu').close();
      };
  };
  })();
  </code></pre>