这篇文章创建了一个固定大小的工作区，不过创建一个可以根据页面尺寸变化改变的blockly工作区往往更加实用，本文在基于这篇文章的基础上演示如何创建一个动态变化的blockly工作区。
1.创建html页面区域首先需要指定一个html元素来放置blockly工作区，工作区需要根据该元素的坐标和尺寸动态调整布局，该元素可以使用div、table等元素，唯一的要求是需要指定id。至于CSS需要根据自己的应用设计进行性调整，本文以占满屏幕的div元素作为示例，编辑index.html代码，增加如下代码：
<div id="blocklyArea" style="min-height: 100vh;"></div>2.注入blockly接下来就是调用blockly的inject方法来向html页面注入工作区代码，和一文中的代码是一样的
<div id="blocklyDiv" style="position: absolute"></div><xml id="toolbox" style="display: none"> <block type="controls_if"></block><block type="controls_repeat_ext"></block><block type="logic_compare"></block><block type="math_number"></block><block type="math_arithmetic"></block><block type="text"></block><block type="text_print"></block></xml><script src="./blockly/blockly_compressed.js"></script><script src="./blockly/blocks_compressed.js"></script><script src="./blockly/msg/js/zh-hans.js"></script><script> var blocklyArea = document.getElementById('blocklyArea'); var blocklyDiv = document.getElementById('blocklyDiv'); var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById('toolbox')}); </script>3.定位最后一步的目的是监听浏览器窗口大小变化时间，一旦窗口有变化就计算blocklyArea的坐标和尺寸，然后动态调整blockly工作区的尺寸和坐标已适配窗口的变化，相关部分的代码如下：
<script> var blocklyArea = document.getElementById('blocklyArea'); var blocklyDiv = document.getElementById('blocklyDiv'); var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById('toolbox')}); // ------------------定位部分代码 start------------------- var onresize = function(e) { // 计算blocklyArea元素的绝对坐标和尺寸 var element = blocklyArea; var x = 0; var y = 0; do { x += element.offsetLeft; y += element.offsetTop; element = element.offsetParent; } while (element); // 将blocklyDiv定位到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); //重新渲染工作区 }; // 监听浏览器窗口的resize事件，触发onresize方法 window.addEventListener('resize', onresize, false); // 初次打开页面需要计算一次blocklyArea元素的坐标和尺寸并渲染工作区 onresize(); Blockly.svgResize(workspace); // ------------------定位部分代码 end------------------- </script>浏览器打开index.html，可以看到blockly工作区填满了整个屏幕，尝试调整浏览器窗口大小，工作区尺寸也会随之而变化
尺寸动态变化的工作区
完整的代码参考：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>blockly demo</title></head><body> <div id="blocklyArea" style="min-height: 100vh;"></div> <div id="blocklyDiv" style="position: absolute"></div> <xml id="toolbox" style="display: none"> <block type="controls_if"></block> <block type="controls_repeat_ext"></block> <block type="logic_compare"></block> <block type="math_number"></block> <block type="math_arithmetic"></block> <block type="text"></block> <block type="text_print"></block> </xml> <script src="./blockly/blockly_compressed.js"></script> <script src="./blockly/blocks_compressed.js"></script> <script src="./blockly/msg/js/zh-hans.js"></script> <script> var blocklyArea = document.getElementById('blocklyArea'); var blocklyDiv = document.getElementById('blocklyDiv'); var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById('toolbox')}); var onresize = function(e) { // 计算blocklyArea元素的绝对坐标和尺寸 var element = blocklyArea; var x = 0; var y = 0; do { x += element.offsetLeft; y += element.offsetTop; element = element.offsetParent; } while (element); // 将blocklyDiv定位到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></body></html>