html - content - mat card height 100%

Diseño de material angular: ampliar para llenar la ventana (3)

Estoy intentando crear un diseño de material angular. Mi objetivo es crear una página donde llene toda la ventana del navegador sin crear una barra de desplazamiento vertical. En la parte superior de la página hay una barra de herramientas que consume el 100% del ancho de la página. Debajo de la barra de herramientas hay un área de título que también consume el 100% del ancho. Debajo del área del título quisiera un menú de navegación a la izquierda y un área de cliente a la derecha. Mi objetivo es que tanto el menú de navegación como el área del cliente llenen verticalmente toda la ventana del navegador.

Para darle una idea de lo que estoy tratando de lograr:

He estado experimentando con la fila y columna de diseño junto con los atributos flex y layout-fill. Cada otra publicación que he encontrado indica que esto debería ser posible con la combinación correcta, pero la solución me ha eludido. Creé un Plunker para demostrar mi problema:

http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info

Aquí está mi index.html:

<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <title>adasd</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css"> <link rel="stylesheet" href="nav.css"> <link rel="stylesheet" href="style.css"> </head> <body ng-app="plunker" ng-controller="MainCtrl"> <md-toolbar layout="row" class="md-hue-3"> <div flex="15" layout layout-align="center center" > <span>Logo</span> </div> <div flex="85" layout layout-align="center center" > <span>Toolbar Header</span> </div> </md-toolbar> <div flex > <div ng-view flex layout-fill></div> </div>  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>  <script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script> <script src="app.js"></script> </body> </html>

Y el main.html (se muestra en la vista ng):

<div layout="column" flex layout-fill> <div layout="row" flex layout-fill> <md-whiteframe flex="100" layout layout-align="center center" style="margin-bottom: 16px;height: 60px;"> <div flex="100"><span id="site-name">Some sort of a title goes here...</span></div> </md-whiteframe> </div> <div layout="row" flex layout-fill> <md-sidenav layout-fill class="md-sidenav-left " id="siteMenu" md-component-id=" left" md-is-locked-open="$mdMedia(''gt-sm'')"> <md-content layout-fill role="navigation"> <ul class="docs-menu"> <li ng-repeat="section in sections" class="parent-list-item"> <h2 class="menu-heading" ng-if="section.type === ''heading''" id="heading_{{ section.name | nospace }}"> {{section.name}} </h2> <menu-link section="section" ng-if="section.type === ''link''"></menu-link> </li> <li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{''parentActive'' : isSectionSelected(section)}"> <h2 class="menu-heading" ng-if="section.type === ''heading''" id="heading_{{ section.name | nospace }}"> {{section.name}} </h2> <menu-link section="section" ng-if="section.type === ''link''"></menu-link> <menu-toggle section="section" ng-if="section.type === ''toggle''"></menu-toggle> <ul ng-if="section.children" class="menu-nested-list"> <li ng-repeat="child in section.children" ng-class="{''childActive'' : isSectionSelected(child)}"> <menu-toggle section="child"></menu-toggle> </li> </ul> </li> </ul> </md-content> </md-sidenav> <md-content layout="row" class="content-wrapper md-padding" flex layout-fill id="content"> <div flex layout-fill> <h2>Home Content</h2> <ul> <li>Page Content goes here...</li> <li>and here...</li> <li>and here...</li> </ul> </div> </md-content> </div> </div>

Por supuesto, mira a Plunker para ver todo conectado y ver visualmente el problema.

¡Cualquier ayuda sería muy apreciada!

PD. Acabo de probar este Plunker en IE 11 y está teniendo otros problemas de visualización. Pero eso es para otra pregunta otro día. Debería funcionar correctamente en Chrome. Además, el menú se ocultará automáticamente en ventanas de menos de 600 píxeles de ancho. Para mostrar la ventana, amplíe la ventana de visualización de Plunker.

También puede hacerlo sin agregar estilos adicionales simplemente usando los elementos de Material angular.

Básicamente, debe agregar el layout a todos los padres de los elementos que desea llenar verticalmente. Tampoco es necesario que use tantos s de layout-fill .

Aquí la demostración: http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview

También agregué un color de fondo a la barra lateral para demostrar que también se llena verticalmente.

Ejemplo simple:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> </head> <body ng-app="MyApp" layout="column" ng-cloak> <div flex layout="row" layout-align="center center" style="background: plum;"> <div>page filled and content centered</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> <script> angular.module("MyApp", ["ngMaterial"]); </script> </body> </html>

Salida:

<div flex style="height: -webkit-calc(100% - 76px)"> <div ng-view flex layout-fill style="height: 100%"> </div> </div>

Simplemente pensé que esta respuesta debería ir en una respuesta para que sea más fácil para los demás.