md-sidenav-container在angular2材質中不顯示內容

Question

我用下面的一個side nav不顯示。如果我添加邊欄顯示的內容。哇..

<md-sidenav-container mode="side" > 
    <md-sidenav #sidenav opened="true" style="background-color: green"> 
     Dude!!!!!! 
    </md-sidenav> 

    <div class="my-content" style="background-color: blue"> 
    <router-outlet name="servicelistright"></router-outlet> 
    </div> 

</md-sidenav-container> 

例如，我添加內容然後工作。我如何解決這個愚蠢的問題？

<div class="my-content" style="background-color: blue"> 
    Whats the deleio? 
    <router-outlet name="servicelistright"></router-outlet> 
    </div> 

Answer 1

<md-sidenav-container class="container-fluid"> 
    <!-- separating content between each other --> 
    <div class="col-md-1"> 
     <button md-button (click)="sidenav.open()"> 
      <i class="fa fa-list"></i> 
     </button> 
    </div> 
    <div class="col-md-11"> 
    Main content goes here 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    </div> 

    <!-- below contains elements for menu strip --> 
    <md-sidenav #sidenav class="example-sidenav"> 
    Menu bar 
    </md-sidenav> 

</md-sidenav-container> 

注：<br>加入到創建一個高度。

LIVE DEMO

Answer 2

你不能看到你的sidenav除非你的內容填寫您<md-sidenav-container>原因是<md-sidenav>重疊（在over模式的情況下，或只是把在side模式）中的<md-sidenav-container>。

因此，只要你的容器不包含任何東西，它是空的，一個空的div沒有任何高度，所以你相關的sidenav。