删除掌上电脑的底部边距
Posted
技术标签:
【中文标题】删除掌上电脑的底部边距【英文标题】：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;" - 然后更新它，完成后通知我，我会检查它以验证预期的更改是否已实施。
【参考方案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 中放了一个屏幕截图。以上是关于删除掌上电脑的底部边距的主要内容，如果未能解决你的问题，请参考以下文章