在角度材质中一起使用sidenav和工具栏时,页面不会滚动

时间:2015-09-30 00:23:08

标签: css angularjs material-design angular-material

当我在没有md-toolbar的情况下使用md-sidenav时,一切正常。意思是,打开sidnav将像下面的图像一样正确执行。

enter image description here

但是当我在sidenav之前或包含sidenav的部分之前添加工具栏时,在打开sidenav时页面将找到滚动并且sidenav将不会填满整个页面的高度(下图),而它应该与之前相同。 工具栏高度大小将添加到页面的高度。

enter image description here

complete code at plnkr

这是代码的主要部分:

<div ng-controller="AppCtrl" layout="column" layout-fill>
    <md-toolbar>
        <div class="md-toolbar-tools" layout="row" style="background-color:crimson">
            ...
        </div>
    </md-toolbar>

    <section layout="row" flex>
        <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
            ...
        </md-sidenav>

        <md-content flex layout-padding>
            ...
        </md-content>

        <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
            ...
        </md-sidenav>
    </section>
</div>

1 个答案:

答案 0 :(得分:3)

我使用不同的页面布局解决了这个问题。 在md-toolbar之前使用md-sidenav:

<div layout="row">
   <md-sidenav>        
   </md-sidenav>
   <div layout="column">
      <md-toolbar>
      </md-toolbar>
      <md-content>
      </md-content>
   </div>
</div>