無法一個角/材料sidenav的高度設置爲100％

-1

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

「對於全屏sidenav，推薦的方法是建立在DOM 這樣可以自然佔用全部空間：

然後他們有一個我試圖複製的例子。當我看到我的sn-content div在mat-sidenav-container的css樣式中顯示時，由於某種原因，我看到這個高度是灰色的？我已經從chrome開發工具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>

來源

2017-10-10 user2094257

嘗試使用此： <墊sidenav-容器類= 「定製sidenav容器」> .custom-sidenav容器{ 位置：繼承; 身高：100％; display：inherit; transform：inherit; } – user1594

@ user1594這是什麼意思？ – user2094257

你可以嘗試以上CSS樣式的mat-sidenav-container – user1594

只是想張貼任何新的旅行在這裏跟我一樣....

不知道這是一個新選項還是添加了哪個版本的素材，但是目前您可以簡單地將[fixedInViewport] =「true」添加到mat-sidenav組件以及使用[fixedTopGap]和[fixedBottomGap]來選擇允許菜單/工具欄的間隙。

文檔瀏覽：Angular Material Sidenav API

而且，請注意墊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>

來源

2018-01-17 13:43:27 Dillon

在導航組件css：

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

來源

2017-10-10 12:20:07 Vega

爲什麼這是必要的？ – user2094257

您的意思:: ng-deep？ – Vega

我的意思是整個陳述？爲什麼這個工作/爲什麼Sidenav沒有按照預期從一開始就工作/ – user2094257

鑑於這種標記：

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

下面的樣式表將幫助您解決問題：

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

來源

2017-10-10 12:58:09 user1594

無法一個角/材料sidenav的高度設置爲100％

回答

相關問題