Remove the bottom margin of a handsontable

I am using Chrome Version 61.0.3163.100 (Official Build) (64-bit) or Safari Version 11.0 (12604.1.38.1.7) under Mac OS Sierra 10.12.6.

I want to create a handsontable, whose height may exceeds the height of the screen:

https://jsbin.com/bobevafana/edit?html,output

I realize that there is always a bottom margin below the table, does anyone know how to remove it?

var app = angular.module('app', ['ngHandsontable']);
app.controller('Ctrl', ['$scope', '$filter', '$timeout', 'hotRegisterer', function($scope, $filter, $timeout, hotRegisterer) {
  $scope.dataJson = [
    [5], [7], [5], [7], [5], [7], [5], [7], [5],
    [7], [5], [7], [5], [7], [5], [7], [5], [7],
    [5], [7], [5], [7], [5], [7], [5], [7], [5],
    [7], [5], [7], [5], [7], [5], [7], [5], [7],
    [5], [7], [5], [7], [5], [7], [5], [7], [5],
    [7], [5], [7], [5], [7], [5], [7]
  ];

  $scope.settings = {
    contextMenu: true,
    onAfterCreateRow: function(index, amount) {
      console.log("onAfterCreateRow");

      $timeout(function() {
        $scope.$digest();
      });

    }
  };
}]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
  <script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.js"></script>
  <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
  <script src="https://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Ctrl">
    <hot-table settings="settings" datarows="dataJson"></hot-table>
  </div>

</body>

</html>

What I saw in that demo of yours is; the default browser style (margin) added to the body, and not the table.

Setting the margin CSS property for the body can be helpful. Check it out yourself below in the snippet, or here: https://jsbin.com/qejekiqigo/1/edit?html,output

var app = angular.module('app', ['ngHandsontable']);
app.controller('Ctrl', ['$scope', '$filter', '$timeout', 'hotRegisterer', function($scope, $filter, $timeout, hotRegisterer) {
  $scope.dataJson = [
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7],
    [5],
    [7]
  ];

  $scope.settings = {
    contextMenu: true,
    onAfterCreateRow: function(index, amount) {
      console.log("onAfterCreateRow");

      $timeout(function() {
        $scope.$digest();
      });

    }
  };
}]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
  <script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.js"></script>
  <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
  <script src="https://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script>
  <style>body { margin-bottom: 0; /* OR margin: 0; */ }</style>
</head>

<body ng-app="app">
  <div ng-controller="Ctrl">
    <hot-table settings="settings" datarows="dataJson"></hot-table>
  </div>

</body>

</html>