Question

我正在尝试将HOT元素（高度：100％）放在位置：固定容器中。但垂直滚动不起作用 - 只有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正常工作？

由于

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％时，动手滚动问题

1 个答案: