manyi/static/angular-mod/tpl/layout_app.html

<!-- hbox layout -->
<div class="hbox hbox-auto-xs bg-light " ng-init="
  app.settings.asideFolded = true; 
  app.settings.asideFixed = true;
  app.settings.asideDock = false;
  app.settings.container = false;
  app.hideAside = false
  ">
  <!-- column -->
  <div class="col w lter b-r" ng-controller="CustomTabController">
    <div class="vbox">
      <div class="wrapper b-b">
        <div class="font-thin h4">Header</div>
      </div>
      <div class="nav-tabs-alt">
        <ul class="nav nav-tabs nav-justified">
          <li ng-class="{'active': tabs[0]}">
            <a href ng-click="tab(0)">Day</a>
          </li>
          <li ng-class="{'active': tabs[1]}">
            <a href ng-click="tab(1)">Month</a>
          </li>
          <li ng-class="{'active': tabs[2]}">
            <a href ng-click="tab(2)">Year</a>
          </li>
        </ul>
      </div>
      <div class="row-row">
        <div class="cell scrollable hover">
          <div class="cell-inner">
            <div class="tab-content">
              <div class="tab-pane" ng-class="{'active': tabs[0]}">
                <div class="wrapper-md">
                  This is the scrollable content, hover to show the scrollbar
                  <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
                  You got the bottom
                </div>
              </div>
              <div class="tab-pane" ng-class="{'active': tabs[1]}">
                <div class="wrapper-md">
                  Month report
                </div>
              </div>
              <div class="tab-pane" ng-class="{'active': tabs[2]}">
                <div class="wrapper-md">
                  Year report
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /column -->

  <!-- column -->
  <div class="col">
    <div class="vbox">
      <div class="row-row">
        <div class="cell">
          <div class="cell-inner">
            <div class="wrapper-md">
              This is the scrollable content
              <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
              You got the bottom
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /column -->

  <!-- column -->
  <div class="col w-md lter b-l">
    <div class="vbox">
      <div class="wrapper b-b b-light">
        <div class="font-thin h4">Header</div>
        <small class="text-muted">with fluid height</small>
      </div>
      <div class="row-row">
        <div class="cell">
          <div class="cell-inner">
            <div class="wrapper-md">
              This is the scrollable content
              <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
              You got the bottom
            </div>
          </div>
        </div>
      </div>
      <div class="padder b-t b-light text-center">
        <div class="m-xs">Footer with fluid height</div>
      </div>
    </div>
  </div>
  <!-- /column -->
</div>
<!-- /hbox layout -->