Question

我正在使用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,
    ['$scope', '$timeout', '$mdSidenav', menuCtrl]);

function menuCtrl($scope, $timeout, $mdSidenav) {
    var vm = this;

    $scope.close = function() {
        $mdSidenav('menu').close();
    };
};
})();

Answer 1

我对角度材料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-scope类，它不是全高度。在我的情况下，我只是复制/通过demo site中的代码并添加此我的cutom css文件

.ng-scope { height: 100%; }

结果是全高度sidenav在锁定打开和解锁模式下都能正常工作。

Answer 2

这对我有用......

1）将你的sidenav包裹在一个div =＆＃34; vertical＆＃34;像这样...

<div ng-include="'scripts/shared/sidenav/sidenav.html'" layout="vertical"></div>

2）添加＆＃34; flex＆＃34;在你的sidenav中，它会弯曲以填满整页高度。

<md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$mdMedia('sm')" flex>

Answer 3

我通过使用

向我的sidenav添加一个类修复了同样的问题

position: fixed;

Answer 4

尝试在layout-fill属性设置的md-content标记上添加ui-view属性。

<md-content ui-view layout-fill layout-align="center center">

</md-content>

Answer 5

我遇到了类似的问题。设置风格“身高：100vh;”为我工作。你也可以上课。

<div layout="column" style="height:100vh;"></div>

layout =“vertical”也可以使用 - 它在我的上下文中没有任何重大影响。

Answer 6

您需要在侧边栏和内容以及顶部容器中使用flex。这样您就不需要使用任何其他样式。

这是您的代码正常工作（请注意，我将一些部分更新为最新的Angular Material版本）：

<div ng-controller="appCtrl" layout="column" flex>

<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="row" flex>
    <md-sidenav flex class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-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>
</section>
</div>

Answer 7

只需在<div>之外创建一个sidenav。例如，在<body>标记之后，您可以写：

<body layout="row">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-md')">
   <md-toolbar md-theme="deep-orange">
       <h2 class="md-toolbar-tools">Menu</h2>
   </md-toolbar>
   <md-content ng-controller="menuBar" md-theme="deep-orange">
       <md-button layout-align="left" ng-repeat="item in items" ui-sref="{{item.location}}" class="menu-item"
       md-ink-ripple="#bbb" aria-hidden="false"> 
<!-- the above <md-button> just repeats buttons created in the JS -->
        <span>{{item.label}}</span>
       </md-button>
   </md-content>
</md-sidenav>
<!-- Other content ... -->
</body>

此代码将为您提供完全垂直的侧边栏。

Answer 8

对于我来说，角度材料ver 1.1.0-RC.5 以上都没有，所以我这样做了：

<body layout="column">

<div layout="row" ng-controller="reviewController" ng-cloak flex>

    <div layout="row">
            <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" md-whiteframe="4" layout="column">
            <md-toolbar class="md-theme-indigo" class="md-medium-tall">
                <h1 class="md-toolbar-tools">Sidenav Left</h1>
            </md-toolbar>
            <div ng-controller="LeftCtrl">
                <md-button ng-click="close()" class="md-primary" hide-gt-sm>
                    Close Sidenav Left
                </md-button>
                <p hide show-gt-sm flex>
                    This sidenav is locked open on your device. To go back to the default behavior, narrow your display.
                </p>
                <p flex>
                    hi
                </p>
                <p flex>
                    there!
                </p>
            </div>
        </md-sidenav>
        <div layout-column flex>

            <p flex>
                The left sidenav will 'lock open' on a medium (>=960px wide) device.
            </p>
            <p flex>
                The right sidenav will focus on a specific child element.
            </p>
            <div flex>
                <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-sm>
                    Toggle left
                </md-button>
            </div>
            <div flex>
                <md-button ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary">
                    Toggle right
                </md-button>
            </div>

            <md-content ui-view layout="column" flex></md-content>
        </div>
        <md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
            <md-toolbar class="md-theme-light">
                <h1 class="md-toolbar-tools">Sidenav Right</h1>
            </md-toolbar>
            <md-content ng-controller="RightCtrl" layout-padding>
                <form>
                    <md-input-container>
                        <label for="testInput">Test input</label>
                        <input type="text" id="testInput" ng-model="data" md-autofocus>
                    </md-input-container>
                </form>
                <md-button ng-click="close()" class="md-primary">
                    Close Sidenav Right
                </md-button>
            </md-content>
        </md-sidenav>
    </div>
</div>

上面的代码与角度材料文档中给出的代码几乎相同， Js 文件也类似于docs :)中给出的代码。修改
更多参考文献：
1. https://gist.github.com/epelc/6aa345f4496776569830。将$media('gt-lg')的折旧值更正为$mdMedia('gt-sm')
2. https://github.com/angular/material/issues/1092

Answer 9

上述问题仅通过修改css解决，无需更改任何代码。

溶液 - .ng-scope {height：100％; }

Answer 10

<div layout="column" layout-fill>
<section layout="row" flex>
    <md-sidenav class="md-sidenav-left"
                md-component-id="left"
                md-is-locked-open="$mdMedia('gt-md')"
                md-disable-backdrop
                md-whiteframe="4">

        <md-content>
            <div layout="row" layout-align="center center">
                <md-button ng-click="closeSideNav()" class="md-primary">
                    Agregar Zona +
                </md-button>
            </div>

            <p hide show-gt-md>
                This sidenav is locked open on your device. To go back to the default behavior,
                narrow your display.
            </p>
        </md-content>
    </md-sidenav>
</section>

测试

Answer 11

我尝试了很多东西来解决这个问题，我终于能够通过将uiview直接添加到我的菜单组件来修复它： <menu uiview layout="column" class="menu"> </menu>

Answer 12

我没有尝试使用指令的其他修复程序，但我使用了这个简单的CSS并得到了我需要的东西。有关此CSS的任何更正或建议都将受到欢迎。

md-sidenav {
  height: -webkit-fill-available;
}

如何使用Angular-Material获得全高度sidenav

12 个答案: