Handsontable scroll issues when HOT div height 100%

I am trying to place the HOT element with (height:100%) inside position:fixed container. But the vertical scrolling does not work - only blank rows in FF39, GC44, and IE11.

I have also tried to set dynamically the height of HOT element to the values of parent container, e.g.

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

It works fine in GC and FF, but there are issues with scrolling in IE11. If you move the vertical scrollbar to the bottom, it shows the last row at ~66700. But the last row number should be 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>

Does anyone know any CSS/layout tricks how to get Handsontable work correctly when using 100% of space of the parent container?

Thanks

Solution

I wasn't aware of that bug but to be honest I never use height:100%. Instead, why don't you manually calculate the height using the offset:

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

And if you want it to always keep the 100% height, even on resize, then add:

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