fix(tabs): tabs now work properly with md-dynamic-height and

`md-align-tabs="bottom"`

Closes #4368

src/components/tabs/js/tabsController.js

@@ -628,17 +628,24 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
  function updateHeightFromContent () {
  if (!ctrl.dynamicHeight) return $element.css('height', '');
  if (!ctrl.tabs.length) return queue.push(updateHeightFromContent);
+
  var tabContent = elements.contents[ ctrl.selectedIndex ],
  contentHeight = tabContent ? tabContent.offsetHeight : 0,
  tabsHeight = elements.wrapper.offsetHeight,
  newHeight = contentHeight + tabsHeight,
- currentHeight = $element.prop('clientHeight');
+ currentHeight = $element.prop('offsetHeight');
+
+ if ($element.attr('md-align-tabs') === 'bottom') {
+ currentHeight -= tabsHeight;
+ newHeight -= tabsHeight;
+ }
+ if ($element.attr('md-border-bottom') !== undefined) ++currentHeight;
  if (currentHeight === newHeight) return;
 
  // Lock during animation so the user can't change tabs
  locked = true;
 
- var fromHeight = { height: currentHeight + 'px'},
+ var fromHeight = { height: currentHeight + 'px' },
  toHeight = { height: newHeight + 'px' };
 
  // Set the height to the current, specific pixel height to fix a bug on iOS where the height

src/components/tabs/tabs.scss

@@ -3,15 +3,9 @@ $tabs-tab-width: $baseline-grid * 12 !default;
 $tabs-header-height: 48px !default;
 
 @keyframes md-tab-content-hide {
- 0% {
- opacity: 1;
- }
- 50% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
+ 0% { opacity: 1; }
+ 50% { opacity: 1; }
+ 100% { opacity: 0; }
 }
 
 md-tab-data {
@@ -35,12 +29,14 @@ md-tabs {
  min-height: 200 + $tabs-header-height;
  }
  &[md-align-tabs="bottom"] {
+ padding-bottom: $tabs-header-height;
  md-tabs-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: $tabs-header-height;
+ z-index: 2;
  }
  md-tabs-content-wrapper {
  top: 0;