title: Positioning fixed tabs in angular material
body: <p>I have the below HTML being used with an angular project using angular material.</p>
  
  <p>My concern is based around md-tabs</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;meta name="format-detection" content="telephone=no"&gt;
          &lt;meta name="msapplication-tap-highlight" content="no"&gt;
          &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"&gt;
          &lt;!--Scripts--&gt;
          &lt;script src="scripts/bundle.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
          &lt;!--Stylesheets--&gt;
          &lt;link rel="stylesheet" href="css/bs.css" /&gt;
          &lt;link rel="stylesheet" href="css/bsf.css" /&gt;
          &lt;link rel="stylesheet" href="css/bundle.css" /&gt;
          &lt;link rel="stylesheet" href="css/index.css"&gt;
  
          &lt;title&gt;RippleAlpha&lt;/title&gt;
          &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /&gt;
          &lt;script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/leaf.js"&gt;&lt;/script&gt;
  &lt;style&gt;&lt;/style&gt;
      &lt;/head&gt;
      &lt;body layout="column" ng-app="rippleApp" ng-controller="tabCtrl"&gt;
  
          &lt;header&gt;
              &lt;div layout="column" layout-fill&gt;
                  &lt;md-toolbar&gt;
                      &lt;div class="md-toolbar-tools"&gt;
                          &lt;md-button&gt;
                              &lt;md-button class="navbar-brand" ng-click="openLeftMenu()"&gt;SM&lt;/md-button&gt;
                          &lt;/md-button&gt;                        &lt;!-- fill up the space between left and right area --&gt;
                          &lt;span flex&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/md-toolbar&gt;
              &lt;/div&gt;
              &lt;md-sidenav md-component-id="left" class="md-sidenav-left"&gt;Test case&lt;/md-sidenav&gt;
  
          &lt;/header&gt;
              &lt;div layout-fill class="containerh"&gt;
          &lt;div id="content" ui-view&gt; &lt;/div&gt;
  
          &lt;div class="tab-container"&gt;
              &lt;md-tabs style="height:100%;position:relative;bottom:0px;" flex style="margin: 0" md-align-tabs="bottom" md-stretch-tabs="always" md-swipe-content="" layout-fill md-selected="selectedIndex"&gt;
                  &lt;md-tab label="a"&gt;&lt;/md-tab&gt;
                  &lt;md-tab label="Home"&gt;&lt;/md-tab&gt;
                  &lt;md-tab label="c"&gt;&lt;/md-tab&gt;
              &lt;/md-tabs&gt;
          &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="scripts/platformOverrides.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="scripts/index.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Currently I'm getting random white space under all of my output and my tabs are not laying at the bottom of the page. They are hovering above the bottom by a considerable amount.</p>
  
  <p>I've been searching around and ahve yet to find a reasonable solution.</p>