可調整大小的工作區
一個好的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的現場演示，它填滿了屏幕的底部。
