我使用Angular-Material并实现了一个SideNav菜单。当屏幕尺寸较小时，菜单被隐藏，当单击菜单切换按钮时，菜单从左侧滑出，具有整页高度。当屏幕较大时，菜单显示为固定在左侧，但不是在整页高度。
如何使固定菜单显示为整页高度。
我一直在玩css和其他md属性，但只是无法找到如何。
<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>
和控制器：
(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,menuCtrl]);
function menuCtrl($scope,$mdSidenav) {
var vm = this;
$scope.close = function() {
$mdSidenav('menu').close();
};
};
})();
我有与angular-material 0.6.0 rc1完全相同的问题。 (我使用的代码从
demo site)。
问题不是来自角材料代码，而是来自您的页面的父css容器，不是全高度。
您的网页应该有以下结构：
<ui-view class="ng-scope">
<div ng-controller="appCtrl" layout="vertical" layout-fill>
... your md sidenav code here ...
</div>
</ui-view>
问题来自ng范围类，它不是全高。在我的情况下，我只是复制/从demo site代码和添加这个im我的cutom css文件
.ng-scope { height: 100%; }
结果是在锁定打开和解锁模式下，全高度sidenav工作正常。
