可调整大小的工作区

出色的 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 的实时演示。