title: Angular material layout - expand to fill window
body: <p>I am attempting to create an Angular material layout.  My goal is to create a page where it fills the entire browser window without creating a vertical scroll bar.  At the top of the page is a toolbar that consumes 100% of the width of the page.  Under the toolbar is a title area that also consumes 100% of the width.  Under the title area I would like a nav menu on the left and a client area on the right.  My goal is to have both the nav menu and the client area fill vertically the entire browser window.</p>
  
  <p>To give you a visual of what I am trying to accomplish:
  <img src="https://i.stack.imgur.com/NNfQi.jpg" alt="enter image description here"></p>
  
  <p>I have been experimenting with the layout row and column along with the attributes flex and layout-fill.  Every other post that I have found indicates that this should be possible with the right combination however the solution has eluded me.  I have created a Plunker to demonstrate my problem:</p>
  
  <p><a href="http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info" rel="noreferrer">http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info</a></p>
  
  <p>Here is my index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;adasd&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css"&gt;
    &lt;link rel="stylesheet" href="nav.css"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body ng-app="plunker" ng-controller="MainCtrl"&gt;
    &lt;md-toolbar layout="row" class="md-hue-3"&gt;
        &lt;div flex="15" layout layout-align="center center" &gt;
          &lt;span&gt;Logo&lt;/span&gt;
        &lt;/div&gt;
        &lt;div flex="85" layout layout-align="center center" &gt;
          &lt;span&gt;Toolbar Header&lt;/span&gt;
        &lt;/div&gt;
    &lt;/md-toolbar&gt;
  
    &lt;div flex &gt;
      &lt;div ng-view flex layout-fill&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Angular Material Dependencies --&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- Angular Material Javascript now available via Google CDN; version 0.6 used here --&gt;
    &lt;script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And the main.html (gets displayed in the ng-view):</p>
  
  <pre><code>&lt;div layout="column" flex layout-fill&gt;
    &lt;div layout="row" flex layout-fill&gt;
        &lt;md-whiteframe flex="100" layout layout-align="center center" style="margin-bottom: 16px;height: 60px;"&gt;
            &lt;div flex="100"&gt;&lt;span id="site-name"&gt;Some sort of a title goes here...&lt;/span&gt;&lt;/div&gt;
        &lt;/md-whiteframe&gt;
    &lt;/div&gt;
    &lt;div layout="row" flex layout-fill&gt;
        &lt;md-sidenav layout-fill class="md-sidenav-left " id="siteMenu" md-component-id=" left" md-is-locked-open="$mdMedia('gt-sm')"&gt;
            &lt;md-content layout-fill role="navigation"&gt;
                &lt;ul class="docs-menu"&gt;
                  &lt;li ng-repeat="section in sections" class="parent-list-item"&gt;
                        &lt;h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}"&gt;
                            {{section.name}}
                        &lt;/h2&gt;
                        &lt;menu-link section="section" ng-if="section.type === 'link'"&gt;&lt;/menu-link&gt;
                  &lt;/li&gt;
  
                    &lt;li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}"&gt;
                        &lt;h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}"&gt;
                            {{section.name}}
                        &lt;/h2&gt;
                        &lt;menu-link section="section" ng-if="section.type === 'link'"&gt;&lt;/menu-link&gt;
  
                        &lt;menu-toggle section="section" ng-if="section.type === 'toggle'"&gt;&lt;/menu-toggle&gt;
  
                        &lt;ul ng-if="section.children" class="menu-nested-list"&gt;
                            &lt;li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}"&gt;
                                &lt;menu-toggle section="child"&gt;&lt;/menu-toggle&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/md-content&gt;
        &lt;/md-sidenav&gt;
  
        &lt;md-content layout="row" class="content-wrapper md-padding" flex layout-fill id="content"&gt;
          &lt;div flex layout-fill&gt;
            &lt;h2&gt;Home Content&lt;/h2&gt;
  
            &lt;ul&gt;
              &lt;li&gt;Page Content goes here...&lt;/li&gt;
              &lt;li&gt;and here...&lt;/li&gt;
              &lt;li&gt;and here...&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/md-content&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Of course, look at the Plunker to see everything wired together and visually see the problem.</p>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p>PS. I just tested this Plunker on IE 11 and it is having other display issues.  But that is for another question another day.  It should work correctly on Chrome.  Also, the menu will auto hide on windows less than 600px wide.  To show the window, make the Plunker display window wider.</p>