可调整大小的工作区
一个好的Web应用程序将调整Blockly的大小以填充屏幕上的可用空间，而不是固定大小。有几种方法可以做到这一点，包括使用iframe，CSS和JavaScript定位。此页面演示了一种强大而灵活的叠加方法。
这是一个三步过程。第一步是定义区域。第二步是注入Blockly。第三步是将Blockly定位在这个区域上。
定义区域
使用HTML表格或带有CSS的div，创建一个空白区域，在页面调整大小时重新流动。确保该区域有ID（在此页面上我们将其称为blocklyArea）。
这是一个填充屏幕底部的表格单元格的现场演示。
注入
注入Blockly与注入固定大小的Blockly中描述的过程相同。添加脚本，blocklyDiv元素，工具箱和注入脚本。
Blockly现在应该在页面上运行，而不是位于它应该位于的位置（可能在屏幕外）。
定位
最后一步是将blocklyDiv元素放在blocklyArea元素上。为此，从blocklyDiv中删除任何高度和宽度样式并添加绝对定位：
<div id="blocklyDiv" style="position: absolute"></div>
然后将注入脚本替换为将'blocklyDiv'置于'blocklyArea'上的脚本：
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv,
{toolbox: document.getElementById('toolbox')});
var onresize = function(e) {
// Compute the absolute coordinates and dimensions of blocklyArea.
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// Position blocklyDiv over blocklyArea.
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
Blockly.svgResize(workspace);
</script>
这是Blockly的现场演示，它填满了屏幕的底部。
