无法将角形/材质侧面的高度设置为100％

Question

我正在尝试将角度/材质sidenav的高度设置为100％。由于某些原因，将其设置为22px使得它无法使用，因为sidenav中的任何项目都填满了整个高度...我设法通过使用mat-sidenav-container全屏属性来使其工作，但是当我执行所有其他内容时（应该在sidenav旁边）不会显示...阅读sidenav文档后发现：

“对于全屏Sidenav，推荐的方法是设置DOM，以便DOM自然可以占用全部空间：”

然后他们有一个示例，我正在尝试复制。当我在mat-sidenav-container的css样式（铬）中查看我的sn-content div时，我看到高度由于某些原因而变灰了吗？我已经从chrome dev tools inspect元素复制了选择器路径，并将高度设置为100％，但仍然没有运气。我也尝试使用！important，但这也没有任何改变。任何想法我在做什么错/这里可能会发生什么？

我的导航组件的html代码：

<mat-sidenav-container position="start">
    <mat-sidenav #sidenav mode="push">
        Navigation component width is ok
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </mat-sidenav>
    <div class="sn-content">
    <button type="button" (click)="sidenav.toggle()">toggle</button>
    </div>
</mat-sidenav-container>

我的导航组件的CSS：

body > app-root > app-home > navigation > mat-sidenav-container > mat-sidenav-content {
    margin: 0;
    height: 100% !important;
    width: 100%;
}

然后，我在以下html代码中使用此导航组件：

<navigation></navigation>

        <div fxLayout="column" fxLayoutAlign="end end">
            <div fxFlex="20%">
            <h4>testing angular flex layout turning out to be quite unusual</h4>                
            </div>

        </div>

Answer 1

只是想为像我这样来这里旅行的任何人发布信息。

不确定这是一个新选项还是添加了哪个版本的材料，但是目前您可以简单地将[fixedInViewport] =“ true”添加到mat-sidenav组件中，以及使用[fixedTopGap]和[fixedBottomGap]允许菜单/工具栏有任何间隙。

此处的文档：Angular Material Sidenav API

另外，请注意，在mat-sidenav-container组件上，您可以根据需要添加指令“全屏”以扩展内容以适合视口。推入和上方模式的叠加层仅显示在内容上，因此，如果它不适合整个视口，则叠加层也将不显示。

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav 
                 [fixedInViewport]="true" 
                 mode="push">
        This is the sidenav, yay
    </mat-sidenav>
    <mat-sidenav-content>
        This is the content section
        <button mat-button
                (click)="sidenav.toggle()">Toggle sidenav</button>
    </mat-sidenav-content>
</mat-sidenav-container>

Answer 2

在导航组件 css 中：

::ng-deep .mat-sidenav-container{
  height: 100vh !important;
}