全高一欄下sidenav（跨設備）

設置我sidenav以適應屏幕高度的100％這樣：全高一欄下sidenav（跨設備）

我app.component.html：

<md-toolbar>etc</md-tooblar> 

<router-outlet></router-outlet>

我的一個途徑是指sidenav這樣：

admin.component.ts

<md-sidenav-container> 
    <md-sidenav #sidenav mode="side" opened="true" class="sidenav"> 
     My Sidenav 
    </md-sidenav> 

    <div class="sidenav-content mat-typography"> 
     <router-outlet></router-outlet> 
    </div> 
</md-sidenav-container>

個

admin.component.css：

md-sidenav-container { 
    height: 100vh; 
}

的問題是，高度爲100％，不包括從我的主要的應用程序組件的工具欄，並且在任何我的網頁滾動條。

我試圖將我的md-sidenav-container高度設置爲93％（這完全適合我的屏幕），但在其他屏幕中，容器從屏幕底部錯過大約30-50像素（容器沒有到達屏幕底部）。

任何解決方案？

來源

2017-07-30 TheUnreal

'height：100％'是相對於父'div'的高度。在這裏，「身高：100vh」會更合適嗎？ –

如何100vh而不是100％。另一方面，爲什麼你有兩次？ – Vega

我試過'height：100vh'，結果是一樣的：滾動條出現在每一頁中（工具欄高度不計算）。我有2個''，因爲那些是2個不同的模塊。 – TheUnreal

把

md-sidenav-container { 
    height: calc(100vh - hightOfToolbar); 
}

應該從事的任何地方，你會調整容器高度篩選最大高度 - 工具欄的高度。

來源

2017-07-30 14:07:39 Vega

全高一欄下sidenav（跨設備）

回答

相關問題