無法將角度/材料 sidenav 的高度設置為 100%

Question

我正在嘗試將角度/材料 sidenav 的高度設置為 100%。 出於某種原因，它設置為 22px 使其無法使用，因為 sidenav 中的任何項目都填滿了整個高度......我設法使用 mat-sidenav-container 全屏屬性讓它工作，但是當我這樣做時，所有其他內容（它應該在 sidenav 旁邊）沒有顯示......通過 sidenav 文檔閱讀我發現以下內容：

“對於全屏 sidenav，推薦的方法是設置 DOM，以便 DOM 可以自然地占據整個空間：”

然后他們有一個我試圖復制的例子。 當我在 chrome 中查看 mat-sidenav-container 的 css 樣式中的 sn-content div 時，我看到由於某種原因高度變灰了？ 我已經從 chrome 開發工具檢查元素復制了選擇器路徑並將高度設置為 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 組件上，如果您願意，您可以添加指令“全屏”以擴展您的內容以適應視口。 push 和 over 模式的覆蓋層只顯示在內容上，所以如果它不適合整個視口，那么你的覆蓋層也不會。

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