当 HOT div 高度为 100% 时，手感滚动会出现问题

Question

我正在尝试将具有 (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>

有谁知道在使用 100% 的 space 父容器时如何让 Handsontable 正常工作的 CSS/layout 技巧？

谢谢

Answer 1

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

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

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

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

当 HOT div 高度为 100% 时，手感滚动会出现问题

Handsontable scroll issues when HOT div height 100%

handsontable