css - 无法将 Angular 形/ Material 侧面的高度设置为100％

我试图将角度/材质侧导航的高度设置为100%。由于某些原因，它被设置为22px，这使得它不可能使用，因为侧导航中的任何项目都会填满整个高度。。。我使用mat sidenav container fullscreen属性成功地实现了这一点，但是当我这样做时，所有其他内容（应该在sidenav旁边）都不会显示通过阅读sidenav文档，我发现了以下内容：
“对于全屏侧导航，推荐的方法是设置DOM
这样就可以自然地
空间：“
然后他们有一个例子，我正试图复制。当我看到我的sn content div在mat sidenav容器的css样式的chrome里面时，我看到高度因为某种原因变灰了？我已经从chrome dev tools inspect元素复制了选择器路径，并将高度设置为100%，但仍然没有成功。我也试过用！很重要，但这也没有改变什么。知道我做错了什么吗/这里可能发生了什么？
我的导航组件的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>

最佳答案

只是想给像我这样的新来的人发邮件。。。。
不确定这是一个新选项还是添加到了哪个版本的材质中，但目前您可以简单地将[FixedViewport]=“true”添加到mat sidenav组件，并使用[fixedTopGap]和[fixedBottomGap]可选地允许菜单/工具栏的任何间隙。
此处的文档：Angular Material Sidenav API
另外，请注意，在mat sidenav容器组件上，如果您愿意的话，可以添加“全屏”指令来扩展内容以适应视图。“推送”和“覆盖”模式的覆盖仅显示在内容上，因此如果它不适合整个视口，则覆盖也不会显示。

<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>

关于css - 无法将 Angular 形/ Material 侧面的高度设置为100％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46666381/