blockly二次开发中文文档——3.2可调整大小的工作区

可调整大小的工作区

一个好的Web应用程序将调整Blockly的大小以填充屏幕上的可用空间，而不是固定大小。有几种方法可以做到这一点，包括使用iframe，CSS和JavaScript定位。此页面演示了一种强大而灵活的叠加方法。

这是一个三步过程。第一步是定义区域。第二步是注入Blockly。第三步是将Blockly定位在这个区域上。

定义区域

使用HTML表格或带有CSS的div，创建一个空白区域，在页面调整大小时重新流动。确保该区域有ID（在此页面上我们将其称为blocklyArea）。

这是一个填充屏幕底部的表格单元格的现场演示。

注入

注入Blockly与注入固定大小的Blockly中描述的过程相同。添加脚本，blocklyDiv元素，工具箱和注入脚本。

Blockly现在应该在页面上运行，而不是位于它应该位于的位置（可能在屏幕外）。

定位

最后一步是将blocklyDiv元素放在blocklyArea元素上。为此，从blocklyDiv中删除任何高度和宽度样式并添加绝对定位：

然后将注入脚本替换为将'blocklyDiv'置于'blocklyArea'上的脚本：

这是Blockly的现场演示，它填满了屏幕的底部。