css - tutorial - El material angular md-sidenav no puede alcanzar el 100% de altura

sidebar angular

Question

Estoy haciendo una nueva aplicación angular2 usando angular2-material con un sidenav. Y no puedo, por mi vida, conseguir que Sidenav tenga una altura del 100%. Estoy tratando de obtener un menú para deslizarse que ocupe toda la altura de la pantalla. Y quiero que se abra de la misma manera sin importar dónde se haya desplazado el usuario.

Aquí está mi plantilla:

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

Y aquí está mi 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;
  }

}

También tengo html configurado a height:100% y body configurado a min-height:100%

Answer 1

Acabé estableciendo la position:fixed en el sidenav, que me dio exactamente lo que quería.

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

De acuerdo con un comentario en Problema: Material angular 2: no se muestra en pantalla completa y se eliminará el atributo de pantalla completa ...

Intenta esto en su lugar:

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

Answer 3

En la última versión de material.angular puede usar la propiedad fixedInViewport en mat-sidenav.

Vea abajo.

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

Answer 4

Usar pantalla completa

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

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

haga una altura de 100vh en lugar de un 100% .... aunque puede hacer ancho = 100%, no puede simplemente hacer una altura de 100% a la vez, porque generalmente puede desplazarse hacia abajo hasta el infinito. utilizar

position:absolute;

y luego usar

height : 100%;