删除掌上电脑的底部边距答案

【问题标题】：Remove the bottom margin of a handsontable删除掌上电脑的底部边距
【发布时间】：2018-04-08 17:30:03
【问题描述】：

我在 Mac OS Sierra 10.12.6 下使用 Chrome 版本 61.0.3163.100（官方构建）（64 位）或 Safari 版本 11.0 (12604.1.38.1.7)。

我想创建一个handsontable，它的高度可能超过屏幕的高度：

https://jsbin.com/bobevafana/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>
</head>

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

</body>

</html>

【问题讨论】：

我在小提琴中找不到任何margin-bottom。
我只是放了一张我在 Mac 下用 Chrome 看到的截图。
table 上没有声明 margin 属性，但在包含的 body 标记上声明了默认的 user-agent margin。这些是典型的vendor（浏览器）样式，您往往需要重置。见：jsbin.com/vofuveraho/1/edit?html,output
@UncaughtTypeError 我试过你的 JSBin，但它仍然显示“边距”...你保存了正确的 JSBin 吗？
您甚至不需要我的 jsbin 克隆 - 只需在您自己的 jsbin 演示的 body 标记中添加 内联样式，例如： style="margin: auto;" - 然后更新它，完成后通知我，我会检查它以验证预期的更改是否已实施。

标签： css height margin handsontable

【解决方案1】：

我在你的演示中看到的是；默认浏览器样式 (margin) 添加到 body，而不是表格。

为body 设置margin CSS 属性会很有帮助。在下面的 sn-p 中自己检查一下，或者在这里：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>

【讨论】：

你能做一个工作的jsbin吗？在 SO 的预览中不是很明显。在您当前的 JSBin 中，如果我们向下滚动到表格底部，我们仍然会看到一个空格，尤其是与左侧的内容相比。
你能注意到这张的不同吗？ -> output.jsbin.com/kacusomimu/1
是的，表格底部有空间。
我想我没有得到你。这是我在这里看到的内容的捕获。底部没有边距！ prntscr.com/h2lywk
好的，我们看到了不同的东西。我正在使用 Chrome。我在 OP 中放了一个屏幕截图。