可調整大小的工作區

優質的網路應用程式會調整 Blockly 大小，填滿螢幕上的可用空間，而不是固定大小。方法有很多種，包括使用 iframe、CSS 和 JavaScript 定位。本頁面示範疊加方法，這種方法既穩健又靈活。

這個過程分為三步驟。第一步是定義區域。第二步是注入 Blockly。 第三步是將 Blockly 放置在這個區域上方。

1. 定義區域

使用 HTML 表格或 CSS div，建立空白區域，並在網頁大小調整時重新排版。確認該區域有 ID (在本頁面中，我們將其稱為 blocklyArea)。

請參閱這個即時示範，瞭解填滿畫面底部的表格儲存格。

2. 注入工作區

注入 Blockly 的程序與注入固定大小的 Blockly 所述程序相同。新增程式碼、blocklyDiv 元素、工具箱和插入呼叫。

Blockly 現在應該會在頁面上執行，只是位置不對 (可能在螢幕外)。

3. 放置工作區

最後一個步驟是將 blocklyDiv 元素放在 blocklyArea 元素上方。如要這麼做，請從 blocklyDiv 移除所有 height 和 width 樣式，然後新增絕對定位：

<div id="blocklyDiv" style="position: absolute"></div>

然後，請將插入指令碼替換成也會將 blocklyDiv 放置在 blocklyArea 上方的指令碼：

const blocklyArea = document.getElementById('blocklyArea');
const blocklyDiv = document.getElementById('blocklyDiv');
const workspace = Blockly.inject(blocklyDiv,
    {toolbox: document.getElementById('toolbox')});
const onresize = function(e) {
  // Compute the absolute coordinates and dimensions of blocklyArea.
  const element = blocklyArea;
  let x = 0;
  let 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 即時展示。