1.建立html頁面區域
首先需要指定一個html元素來放置blockly工作區，工作區需要根據該元素的座標和尺寸動態調整佈局，該元素可以使用div、table等元素，唯一的要求是需要指定id。至於CSS需要根據自己的應用設計進行性調整，本文以佔滿螢幕的div元素作為示例，編輯index.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>最後一步的目的是監聽瀏覽器視窗大小變化時間，一旦視窗有變化就計算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>