angular material 锁定的 md-sidenav 占据了整个屏幕

Question

我希望有一个锁定的左侧导航，右侧的内容会在 tablet/mobile 视图中折叠并隐藏。我希望它 look/have 具有与 Angular Material doc website, or something similar to this codepen 相同的功能。现在，当我的 sidenav 锁定打开时，我的内容不会显示在它的右侧，屏幕的其余部分有某种边缘。如果我将屏幕变小以便 sidenav 折叠内容显示但不可滚动。

我的 index.html 的结构如下所示：

    <body class="docs-body" ng-cloak ng-app="TrooNews" ng-controller="AppController as app">

            <md-sidenav
                class="site-sidenav md-sidenav-left md-whiteframe-z2"
                md-component-id="left" hide-print
                md-is-locked-open="$mdMedia('gt-sm')">

                <header class="nav-header">
                  <a ng-href="/" class="docs-logo">
                    <img src="resources/logo.svg" alt="" />
                    <h1 class="docs-logotype md-heading">Troo News</h1>
                  </a>
                </header>

                <md-content flex role="navigation">
                    <md-list>
                        <md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)">
                            <md-icon>{{item.icon}}</md-icon>
                            <p>{{item.title}}</p>
                        </md-list-item>
                    </md-list>
                </md-content>
            </md-sidenav>

            <div layout="column" tabIndex="-1" role="main" flex>

                <md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">

                  <div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
                    <md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-sm aria-label="Toggle Menu">
                      <md-icon>menu</md-icon>
                    </md-button>
                    <div layout="row" flex class="fill-height">
                      <h2 class="md-toolbar-item md-breadcrumb md-headline">
                        <span class="md-breadcrumb-page">Test</span>
                      </h2>

                      <span flex></span> <!-- use up the empty space -->

                      <div class="md-toolbar-item" layout="row">
                            <div class="search">
                                <md-icon class="search_icon">search</md-icon>
                                <input ng-model="searchCard">
                            </div>
                      </div>
                    </div>
                  </div>

                </md-toolbar>

                <md-content md-scroll-y layout="column" flex>
                  <div ng-viewport flex="noshrink"></div>

                  <div layout="row" flex="noshrink">
                    <div id="license-footer">
                      Powered by Troo News.
                    </div>
                  </div>
                </md-content>

            </div>




    </body>

任何 help/insight 将不胜感激。

Answer 1

检查这支笔。 http://codepen.io/next1/live/MymXqY 你应该使用 layout-fill 和 layout 属性，就像我在这个例子中使用的那样。

angular material 锁定的 md-sidenav 占据了整个屏幕

angular material locked md-sidenav takes up entire screen

javascript

css

angularjs

angular-material