我正在尝试将带有 (height:100%) 的 HOT 元素放置在position:fixed容器内。但是垂直滚动不起作用 - 只有 FF39、GC44 和 IE11 中的空白行。
我还尝试将 HOT 元素的高度动态设置为父容器的值,例如
var ex = $('#example').parent();
$('#example').height(ex.height());
Run Code Online (Sandbox Code Playgroud)
它在 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>
Run Code Online (Sandbox Code Playgroud)
有谁知道在使用父容器的 100% 空间时如何让 Handsontable 正常工作的任何 CSS/布局技巧?
谢谢
我不知道那个错误,但老实说我从不使用height:100%. 相反,为什么不使用偏移量手动计算高度:
let height = $(window).height() - $("#hot-container").offset().top;
Run Code Online (Sandbox Code Playgroud)
如果您希望它始终保持 100% 高度,即使在调整大小时,请添加:
$(window).resize(function(){
hotInstance.updateSettings({
height: $(window).height() - $("#hot-container").offset().top;
})
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
5672 次 |
| 最近记录: |