Impossible d'obtenir un matériau angulaire md-sidenav d'une hauteur de 100%

Question

Je suis en train de faire une nouvelle angular2 application à l'aide de angular2 avec un sidenav. Et je ne peux pas pour la vie de moi que sidenav avoir une hauteur de 100%. Je vais essayer d'obtenir un menu coulissant qui prend toute la hauteur de l'écran. Et je veux qu'elle s'ouvre de la même façon, peu importe où l'utilisateur a défilé.

Voici mon template:

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

Et voici mon 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;
  }

}

J'ai aussi html ensemble de height:100% et body ensemble de min-height:100%

Answer 1

Utiliser le plein écran

 <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

Selon un commentaire sur Issue: Angular Material 2 - l'attribut plein écran ne sera pas rendu en plein écran ...

Essayez ceci à la place:

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

Answer 3

Dans la dernière version de material.angular, vous pouvez utiliser la propriété fixedInViewport sur mat-sidenav.

Voir ci-dessous.

 <mat-sidenav #start mode="over" fixedInViewport="true"> ... </mat-sidenav>
 

Answer 4

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

faire hauteur 100vh au lieu de 100% .... même si vous pouvez faire largeur = 100% vous ne pouvez pas simplement faire hauteur 100% à la fois, parce que généralement vous pouvez faire défiler à l'infini. utilisation

 position:absolute;
 

et ensuite utiliser

 height : 100%;
 

Answer 5

J'ai fini par mettre position:fixed sur le sidenav lui-même, ce qui m'a donné exactement ce que je voulais.

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

}