<!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>