<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-app="demoapp">
<div id="ui" layout="column">
<md-toolbar class="md-whiteframe-z1">
<div class="md-toolbar-tools">
<h1>md-tabs</h1>
</div>
</md-toolbar>
<div id="main">
<div id="left-pane">
<md-content class="md-whiteframe-z2 full-height" layout='column'>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>left-pane</h2>
</div>
</md-toolbar>
<md-subheader>subheader</md-subheader>
<md-divider></md-divider>
<md-content class="full-height">
<div>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="A">
<md-content>
<md-list>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>apple pie</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>avocado</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>almonds</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>apple pie</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>avocado</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>almonds</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>apple pie</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>avocado</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>almonds</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
</md-list>
<md-divider></md-divider>
</md-content>
</md-tab>
<md-tab label="B">
<md-content>
<md-list>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>banana bread</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>blueberries</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
<md-list-item class="md-3-line">
<md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
<div class="md-list-item-text">
<h3>beans</h3>
<p>content1</p>
<p>content2</p>
</div>
</md-list-item>
</md-list>
<md-divider></md-divider>
</md-content>
</md-tab>
</md-tabs>
</div>
</md-content>
</md-content>
</div>
</div>
</div>
</body>
</html>
// Code goes here
var app = angular.module("demoapp", ["ngMaterial"]);
app.controller("DemoController", [ '$scope', function($scope) {
} ]);
/* Styles go here */
.full-height {
height: 100%;
}
#main {
width: 100%;
height: calc(100% - 64px);
}
#main #left-pane md-content {
z-index: 70;
}
#main #left-pane {
width: 100%;
height: 100%;
}
#left-pane > md-content {
width: 200px;
}
body > div {
width: 100%;
height: 100%;
}
#ui {
width: 100%;
height: 100%;
}
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<path d="M24 4c-7.73 0-14 6.27-14 14 0 10.5 14 26 14 26s14-15.5 14-26c0-7.73-6.27-14-14-14zm0 19c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
<path d="M0 0h48v48h-48z" fill="none"/>
</svg>