代码之家 › 专栏 › 技术社区 › Felix Lemke

全高度柔性角料垫抽屉,内容自动溢出

angular-router angular-material flexbox angular css

3

Felix Lemke · 技术社区 · 7 年前

昨天我遇到了一个似乎与 mat-drawer Angulars router-outlet . 我有一个带两个孩子的全页flexbox。一 mat-toolbar 在顶部和自定义组件 app-sidenav 在底部。这很好,应用程序sidenav填充了页面的其余部分,因为flexbox是有弹性的。继续之前,请先查看此简化设置:

<div class="flex">
  <mat-toolbar></mat-toolbar>
  <app-sidenav></app-sidenav>
</div>

相关的风格是

mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }

这很好,高度合适,除非没有大于 阿普西德纳夫 高度。滚动条出现在外部flexbox组件,而不是 main -标签。我也测试过 !important 在高处,还有 100vh 但是没有成功。那么我怎样才能得到 overflow-y 在主标签上工作?

我很确定有个简单的诀窍,但我不知道。谢谢你的帮助。干杯!

编辑:

我做了一个 stackblitz 关于这个问题。当您导航到 CIAO 组件您可以看到滚动条出现在文档根目录,而不是主标记中。

3 回复 | 直到 6 年前

1

3

Felix Lemke 7 年前

除了@sakkeer的工作解决方案之外,我还找到了另一种方法,不用破解position属性,而是使用flex。只需向现有样式添加(而不是替换)以下CSS规则即可。

app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }

2

Sakkeer A 7 年前

试试这个主CSS类

main { 
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 0px; 
}

3

0

VR1256 6 年前

     <mat-drawer-container autosize style="position: absolute;right: 0px;left: 0px;bottom: 0px;top: 0px;">
        <mat-drawer #drawer mode="side" class="toolbar">
            <app-sidenav></app-sidenav>
        </mat-drawer>
        <router-outlet></router-outlet>
     </mat-drawer-container>

上面的代码只对我有效,当我直接放置样式并使用AutoSize时,这样垫子抽屉容器就不会在路由器页面上重叠。