Estoy usando Angular con material angular y diseño flexible
Estoy intentando crear un diseño para una aplicación web que sea exactamente como este sitio . Observe el encabezado fijo, la barra lateral fija, el dolor de contenido fijo. No se utiliza el desplazamiento del navegador, solo el desplazamiento div y encaja perfectamente en la ventana del navegador.
Aquí está el html que estoy usando para darme mi estructura básica:
<md-toolbar color="primary"> <span>Application Title</span> </md-toolbar> <md-sidenav-container> <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> <div class="my-content">Main content</div> </md-sidenav-container>Además configuré los siguientes estilos:
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; } md-sidenav-container, .main-content { margin: 0; width: 100%; height: 100%; }Noté que sin la barra de herramientas en la página todo funciona perfectamente. Entonces agregué un padding-bottom: 64px; a las clases md-sidenav-container, .main-content. Parece que lo arregló para el contenido, pero no para el sidenav. La barra de desplazamiento sidenav todavía va muy por debajo de la ventana del navegador.
Tengo un diseño flexible instalado en mi aplicación Angular si alguien puede decirme cómo hacerlo con las directivas flexibles. De lo contrario, el css simple también estaría bien.
Puede consultar el ejemplo de trabajo en https://angular-material2-issue-dgcx3j.stackblitz.io/
No es completamente igual a lo que solicitó (tiene funcionalidad adicional). La barra lateral está fija en las pantallas grandes, se oculta de manera receptiva en las pantallas pequeñas y muestra el botón de menú en la barra de herramientas.
Puede revisar el código en https://stackblitz.com/edit/angular-material2-issue-dgcx3j?file=app%2Fapp.component.ts
También puede encontrar el código fuente del sitio Angular Material Docs (el que solicitó la misma funcionalidad) en https://github.com/angular/material.angular.io
Puedes probar este código
html
<md-toolbar color="primary"> <span>Application Title</span> </md-toolbar> <md-sidenav-container class="example-container"> <md-sidenav #sidenav class="example-sidenav" opened="true"> Jolly good! </md-sidenav> <div class="example-sidenav-content"> <div class="my-content">Main content</div> </div> </md-sidenav-container>CSS
.example-container { width: 500px; height: 300px; border: 1px solid rgba(0, 0, 0, 0.5); } .example-sidenav-content { display: flex; height: 100%; align-items: center; justify-content: center; } .example-sidenav { padding: 20px; } .my-content{ height:1200px; }y aquí está el enlace de Plunker: https://plnkr.co/edit/YFGQdVcNnIhMK0GzZ25Z?p=preview
esto es lo que buscas
html, body { width: 100%; height: 100%; } mat-sidenav-container { width: 100%; height: calc(100% - 64px); } <md-toolbar color="primary"> <span>Application Title</span> </md-toolbar> <md-sidenav-container> <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> <div class="my-content"> <router-outlet></router-outlet> </div> </md-sidenav-container>