it calculates the header, footer, and offset parameter to return a desirable height for responsive design

autoHeight.angular.directive.js

/*
 author: Lance Vo
 License: MIT
 
 autoHeight directive
 --------------------
 it calculates the remaining height (px) after substracting header/footer/offset. 
 Useful for responsive design content. 
 
 examples:
 // screen's height is 450px
  
 // full size screen
 <div auto-height> autoHeight will set this container 450px  </div>

 
 <header style="height:45px">...</header>
 <div auto-height> autoHeight will set this container 360px  </div>
 <footer style="height:45px">...</footer>



 with 90px offset 

 // screen's height is 450px
 <header style="height:45px">...</header>
 <div style="height:90px">Blah blah</div>
 <div auto-height="90"> autoHeight will set this container 270px (360px -90px)  </div>
 <footer style="height:45px">...</footer>

 */
 
app.directive('autoHeight', function ($window) {
  return {
    link: function autoheight(scope, element, attrs) {
      var t;

      function updateHeight() {
        var page = $(element[0]).closest('.page'),
          offsetY = parseInt(attrs.autoHeight, 10) || 0,
          header = page.find("header").height() || 0,
          footer = page.find("footer").height() || 0
          ;
        scope.height = $window.innerHeight - offsetY - header - footer;
        angular.element(element).css('height', scope.height + 'px');
      }

      setTimeout(function () {
        updateHeight();
      }, 0)
      $window.addEventListener("orientationchange", function () {
        updateHeight();
      }, false);

      $window.addEventListener("resize", function () {
        if (t) {
          return;
        }
        t = setTimeout(function () {
          updateHeight();
          t = undefined;
        }, 50)

      });
    }
  };
});