Angular material 容器未展开以填满页面？

Question

I'm trying to follow this tutorial in creating a slide in navigation, and I have the following stackblitz。侧面导航正在切换，但它没有扩展以适合页面。 IIUC 这个 CSS class 应该可以解决问题（在 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 在渲染时动态生成自定义组件和类，因此通常很难预先捕捉到这些东西。

如果你打开开发工具和select打开的菜单，你可以找到自定义组件，<mat-drawer class="sidenav mat-drawer..."/>，这是阻止全宽菜单的部分。如果您在该组件上手动应用 width: 100% ，它将卡入到位。

我发现了两种方法，但都不是理想的解决方案。您可以查看以及如何通过禁用视图封装来覆盖 angular material 样式，当涉及影子 dom 和其他所有相关内容时，这是一个非常深刻的概念，但您不需要了解所有内容要知道您可以使用该方法覆盖样式。但是，这将在某些时候被弃用。另一种方法是 hard-coded width:100% 直接应用于组件。所以在顶级样式表中类似于 mat-drawer { width:100% }。

Angular material 容器未展开以填满页面？

Angular material container not expanding to fill page?

css

typescript

angular-material

angular

angular-cdk