Question

I'm trying to follow this tutorial，在导航中创建幻灯片，我有following stackblitz。侧面导航在切换，但没有扩展到适合页面的大小。 IIUC这个CSS类应该可以解决问题（在styles.css中）：

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

有想法吗？

Answer 1

.container {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top:0px;
    left:0px;
    bottom:0px;
    right: 0px;
}

让我知道是否有帮助，它看起来可以工作，但是我不知道您到底想要什么，

padding: 0;
margin: 0;

在body元素上以删除滚动条。

Answer 2

我在使用Angular Material时遇到了许多类似的问题。问题源于AngMat在渲染时动态生成自定义组件和类，因此通常很难预先掌握这些内容。

如果打开开发工具并选择打开的菜单，则可以找到自定义组件<mat-drawer class="sidenav mat-drawer..."/>，这是阻止全屏菜单的部分。如果您手动在组件上应用宽度：100％，它将锁定到位。

我发现了两种方法，都不是理想的解决方案。您可以研究::ng-deep以及如何通过禁用视图封装来覆盖有角度的材料样式，这是涉及阴影球和其他所有相关内容的很深的概念，但您无需知道所有这些您可以使用该方法覆盖样式。但是，在某些时候将不建议使用。另一种方法是硬编码宽度：100％直接应用于组件。像这样的顶级样式表中的mat-drawer { width:100% }。

角形材料容器无法扩展到填充页面？

2 个答案: