【问题标题】:page shoud not scroll when using sidenav and toolbar together in angular material在角度材料中同时使用 sidenav 和工具栏时页面不应滚动
【发布时间】:2015-12-27 15:12:16
【问题描述】:

当我在没有 md-toolbar 的情况下使用 md-sidenav 时,一切正常。这意味着,打开 sidnav 将正确执行,如下图所示。

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

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>

【问题讨论】:

标签: css angularjs material-design angular-material


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-17
    • 1970-01-01
    • 2020-07-26
    • 2015-09-01
    • 1970-01-01
    • 2021-07-22
    相关资源
    最近更新 更多