小编Jam*_*mes的帖子

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

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

和控制器:

(function () { 
'use …
Run Code Online (Sandbox Code Playgroud)

angularjs material-design

29
推荐指数
4
解决办法
5万
查看次数

标签 统计

angularjs ×1

material-design ×1