web-dev-qa-db-fra.com

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

Je fais une nouvelle application angular2 en utilisant angular2-material avec un sidenav. Et je ne peux pas pour la vie que cette sidenav atteigne 100%. J'essaie de faire glisser un menu qui occupe toute la hauteur de l'écran. Et je veux qu'il s'ouvre de la même manière, peu importe où l'utilisateur a fait défiler l'écran.

Voici mon modèle:

<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 réglé sur height:100% et body définis sur min-height:100%

cssangularangular-material
39
Alex Kibler

Utilisez 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>
55
user6508767

Selon un commentaire sur Problème: Angular Matériel 2 - ne pas afficher en plein écran , l'attribut plein écran sera supprimé ...

Essayez ceci à la place:

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

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>
9
Kumar
  .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%;
3
Sithija Piyuman Thewa Hettige

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

}
1
Alex Kibler

Vous pouvez également définir mad-sidenav-content _ min-height être 100vh ainsi:

<mat-sidenav-content class="sidenav__content--height"> .... </mat-sidenav-content>

Où:

.sidenav__content--height{
  min-height: 100vh;
}
0
taylorswiftfan