Question

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

“对于全屏sidenav，推荐的方法是设置DOM 这样可以自然地占用空间：“

然后他们有一个我想要复制的例子。当我在chrome-sidenav-container的chrome格式中查看我的sn-content div时，我发现高度因为某些原因而变灰了？我已经从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>

Answer 1

只想发布像我这样的新旅行者......

不确定这是新选项还是添加了哪个版本的素材，但目前您可以简单地添加[fixedInViewport] =＆＃34; true＆＃34;到mat-sidenav组件以及使用[fixedTopGap]和[fixedBottomGap]来选择性地允许菜单/工具栏的任何间隙。

此处的文档：Angular Material Sidenav API

另外，请注意，在mat-sidenav-container组件上，您可以添加指令＆＃34; fullscreen＆＃34;如果您愿意，可以扩展您的内容以适合视口。推送和覆盖模式的叠加层仅显示内容，因此如果它不适合整个视口，则覆盖图也不会。

<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; /* or 100% */
}

Answer 3

鉴于此标记：

 <mat-sidenav-container class="custom-sidenav-container">

以下样式表将解决您的问题：

.custom-sidenav-container { 
    position: inherit;
    height: 100%;
    display: inherit;
    transform: inherit; 
}

无法将角度/材料sidenav的高度设置为100％

3 个答案: