<!doctype html>
<html style="height:100%">
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.css">
    <style>
      .parent-grid {
        width: 100%;
      }
      .main-content{
        min-height: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body ng-app="uiGridResize" class="main-content">
    <div ng-controller="index as vm">
      <div id="grid1" ui-grid="{ data: data }" class="parent-grid" ui-grid-resize-columns ui-grid-auto-resize 
      ng-style="{'height' : gridHeight }"></div>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>
  angular.module('uiGridResize', ['ui.grid', 'ui.grid.resizeColumns'])
  .controller("index", index);
  function index($scope, $window) {
      var vm = {
          data: [],
          gridHeight: '0px'
      }

      init();
      return vm;

      function init() {
          vm.data = [
              {
                  "firstName": "Cox",
                  "lastName": "Carney",
                  "company": "Enormo",
                  "employed": true
              },
              {
                  "firstName": "Lorraine",
                  "lastName": "Wise",
                  "company": "Comveyer",
                  "employed": false
              },
              {
                  "firstName": "Nancy",
                  "lastName": "Waters",
                  "company": "Fuelton",
                  "employed": false
              }
          ];
          
          //pushing 100 rows
          for(var counter=0; counter < 100; counter ++){
            vm.data.push(vm.data[0]);
          }
          angular.extend($scope, vm);
          resizeGrid();

          angular.element($window).bind('resize', function () {
                 resizeGrid();
          }); 
          
      }
      
       
      function resizeGrid() {
              $scope.gridHeight = getGridHeight('parent-grid', 'main-content', 10);
      } 

      function getGridHeight(gridClass, contentClass, bottomOffset) {
          var contentOffset = angular.element(document.getElementsByClassName(contentClass)[0]).offset();
          var contentHeight = angular.element(document.getElementsByClassName(contentClass)[0]).height();
          var gridOffset = angular.element(document.getElementsByClassName(gridClass)).offset();
          console.log(contentHeight)
          if (gridOffset !== undefined) {
              var gridHeight = contentHeight - (gridOffset.top) - bottomOffset;
              return gridHeight + 'px';
          }
  
      }      

  }