Question

一个好的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的现场演示，它填满了屏幕的底部。