HOT div 高度为 100% 时的 Handsontable 滚动问题答案

【问题标题】：Handsontable scroll issues when HOT div height 100%HOT div 高度为 100% 时的 Handsontable 滚动问题
【发布时间】：2015-12-25 09:43:21
【问题描述】：

我正在尝试将具有 (height:100%) 的 HOT 元素放置在 position:fixed 容器中。但是垂直滚动不起作用 - FF39、GC44 和 IE11 中只有空白行。

我还尝试将 HOT 元素的高度动态设置为父容器的值，例如

    var ex = $('#example').parent();
    $('#example').height(ex.height());

它在 GC 和 FF 中运行良好，但在 IE11 中滚动存在问题。如果将垂直滚动条移到底部，它会在 ~66700 处显示最后一行。但最后的行号应该是 100000。

<!DOCTYPE html>
<html>
<head>
  <script src="http://handsontable.com/dist/handsontable.full.js"></script>
  <link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
</head>
<body>
 <div style="position:fixed;top:20px;bottom:0;left:0;right:0; overflow:hidden; border: 1px solid green">
     <div  style="position:fixed; top:40px;left:5px;right:5px;bottom:5px;border: 1px solid red">
         <div id="example" style="overflow:auto; height:100%"></div>
     </div>
 </div>
 <script type="text/javascript">
    var data = Handsontable.helper.createSpreadsheetData(100000, 10);
    var container = document.getElementById('example');
    var hot = new Handsontable(container, {
       data: data,
       rowHeaders: true,
       colHeaders: true,
       stretchH: 'all',
       contextMenu: true
    });
 </script>
</body>
</html>

有没有人知道任何 CSS/布局技巧如何在使用 100% 的父容器空间时让 Handsontable 正常工作？

谢谢

【问题讨论】：

标签： handsontable

【解决方案1】：

我不知道这个错误，但老实说我从不使用height:100%。相反，您为什么不使用偏移量手动计算高度：

let height = $(window).height() - $("#hot-container").offset().top;

如果您希望它始终保持 100% 的高度，即使在调整大小时，请添加：

$(window).resize(function(){
    hotInstance.updateSettings({
        height: $(window).height() - $("#hot-container").offset().top;
    })
});

【讨论】：

感谢提示。设置固定高度属性可修复除 IE11 以外的其他浏览器中的问题。当行数约为时，滚动条位置与可见行不对应。 > 66000.
是的...IE 从来都不是 Web 开发的好浏览器。您可以尝试将其作为错误发布在 github 页面中。