可调整大小的工作区

优秀的 Web 应用会调整 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 实时演示。