Positioning fixed tabs in angular material
<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>