Nie można uzyskać kątowego materiału md-sidenav na 100% wysokości

Question

Robię nową aplikację kątową2 przy użyciu materiału angle2 z sidenav. I nie mogę, aby moje życie dało sidenavowi wysokość 100%. Próbuję uzyskać menu do wysunięcia, które zajmuje całą wysokość ekranu. Chcę, aby otwierała się w ten sam sposób, niezależnie od tego, gdzie użytkownik przewinął.

Oto mój szablon:

<md-sidenav-layout class="demo-sidenav-layout"> 
    <md-sidenav #start mode="over"> 

    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a> 
    <br> 
    </md-sidenav> 
    <md-toolbar color="primary"> 

     <button md-button (click)="start.toggle()">Open Side Drawer</button> 
     <span>Spellbook</span> 

     <span class="demo-fill-remaining"> 

     </span> 

    </md-toolbar> 
    <div class="demo-sidenav-content"> 

    <router-outlet></router-outlet> 
    </div> 
</md-sidenav-layout> 

I tu jest mój CSS:

.demo-sidenav-layout { 
    //border: 3px solid black; 
    min-height:100%; 
    md-sidenav { 
    padding: 10px; 
    background: gainsboro; 
    min-height: 100%; 
    } 
} 

.demo-sidenav-content { 
    padding: 15px; 
    min-height:100%; 
} 

.demo-toolbar { 
    padding: 6px; 

    .demo-toolbar-icon { 
    padding: 0 14px 0 14px; 
    } 

    .demo-fill-remaining { 
    flex: 1 1 auto; 
    } 

} 

Mam też html zestaw do height:100% i body zestaw do min-height:100%

Answer 1

Zastosowanie fullscreen

<md-sidenav-layout fullscreen> 

    <md-sidenav #start mode="over"> 
    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a> 
    <br> 
    </md-sidenav> 

    <md-toolbar color="primary"> 
    <button md-button (click)="start.toggle()">Open Side Drawer</button> 
    <span>Spellbook</span> 
    <span class="demo-fill-remaining"></span> 
    </md-toolbar> 

    <div class="demo-sidenav-content"> 
    <router-outlet></router-outlet> 
    </div> 

</md-sidenav-layout> 

Answer 2

skończyło się na ustawienie position:fixed na samym sidenav, który dał mi dokładnie to, co chciałem.

.demo-sidenav-layout { 
    position:fixed; 
    //border: 3px solid black; 
    min-height:100%; 
    md-sidenav { 
    padding: 10px; 
    background: gainsboro; 
    min-height: 100%; 
    } 
} 

.demo-sidenav-content { 
    padding: 15px; 
    min-height:100%; 
} 

.demo-toolbar { 
    padding: 6px; 

    .demo-toolbar-icon { 
    padding: 0 14px 0 14px; 
    } 

    .demo-fill-remaining { 
    flex: 1 1 auto; 
    } 

} 

Answer 3

Acording na komentarz Issue : Angular Material 2 - not rendering in full screen atrybut fullscreen zostaną usunięte ...

Spróbuj to zamiast:

md-sidenav-container { 
    position: fixed; 
    height: 100%; 
    min-height: 100%; 
    width: 100%; 
    min-width: 100%; 
} 

Answer 4

.demo-sidenav-layout { 
     position:fixed; 
     //border: 3px solid black; 
     min-height:100vh; 
     md-sidenav { 
     padding: 10px; 
     background: gainsboro; 
     min-height: 100%; 
     } 
    } 

Zrób wysokość 100vh zamiast 100% .... chociaż możesz zrobić szerokość = 100% nie możesz po prostu zrobić wysokości 100% na raz, ponieważ zazwyczaj możesz przewinąć w dół do nieskończoności. użycie

position:absolute; 

a następnie użyć

height : 100%;