Diseño de material angular: expandir para llenar la ventana

Question

Apr 15, 2015, 06:03 PM

Diseño de material angular: expandir para llenar la ventana

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 de título, me gustaría 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 visión de lo que estoy tratando de lograr:

He estado experimentando con la fila y la columna de diseño junto con los atributos flex y layout-fill. Cualquier otra publicación que he encontrado indica que esto debería ser posible con la combinación correcta, sin embargo, la solución me ha eludido. He creado 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>
  <!-- Angular Material Dependencies -->
  <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>

  <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
  <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, mire el 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 tiene 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 px de ancho. Para mostrar la ventana, amplíe la ventana de visualización de Plunker.