可調整大小的工作區

良好的網頁應用程式會調整 Blockly 的大小來填滿螢幕上的可用空間，而非固定的大小。方法有很多種，包括使用 iframe、CSS 和 JavaScript 定位。本頁將示範一種強大且靈活的重疊方法。

這個過程分為三步驟。首先，您必須定義區域。第二步是插入 Blockly。第三個步驟是放置於這個區域上的 Blockly。

1. 定義面積

使用 HTML 表格或 div 搭配 CSS，建立一個會在頁面調整大小時自動重排的空白區域。請確認這個區域有 ID (在本頁中，我們稱為 blocklyArea)。

這是填滿畫面底部的表格儲存格的即時示範。

2. 插入工作區

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

現在應在頁面上執行區塊，而非位於應該出現的位置 (可能不在畫面內)。

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。