How to get a full height sidenav with Angular-Material

Question

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.

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.

<div ng-controller="appCtrl" layout="vertical" layout-fill>  <md-toolbar class="md.medium-tall app-toolbar">     <div class="md-toolbar-tools" ng-click="toggleMenu()">         <button class="menu-icon" hide-sm aria-label="Toggle Menu">             <md-icon icon="img/icons/ic_menu_24px.svg">                 <object class="md-icon" data="img/icons/ic_menu_24px.svg"></object>             </md-icon>         </button>         <h2>             <span>Dev.Material</span>         </h2>     </div> </md-toolbar>  <section layout="horizontal" flex>     <md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$media('sm')">          <md-toolbar md-theme="purple">             <h1 class="md-toolbar-tools">Sidenav Left</h1>         </md-toolbar>          <md-content class="md-padding" ng-controller="menuCtrl">             <p>                 This sidenav is locked open on your device. To go back to the default behavior,                 narrow your display.             </p>         </md-content>     </md-sidenav>      <md-content flex class="md-padding">         Some content !!     </md-content> 

and the controller:

(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();     }; }; })(); 

Answer 1

I had the exact same issue with angular-material 0.6.0 rc1. (I used the code from the demo site).

The problem does not come from the angular-material code, but from the parent css container of your page which is not full height.

Your page should have a structure like :

<ui-view class="ng-scope">     <div ng-controller="appCtrl" layout="vertical" layout-fill>         ... your md sidenav code here ...     </div> </ui-view> 

The issue comes from the ng-scope class wich is not full height. In my case I just copy / past the code from the demo site and add this im my cutom css file

.ng-scope { height: 100%; } 

The result is a full height sidenav working fine in both locked-open and unlock mode.