是否有另一种方式来调整Blockly工作区的大小？

Question

我正在尝试在div中调整我的Blockly workspace。我希望如果页面变得更小，它的div和Blockly workspace也会变小。

我知道Google在其documentation中提供了一种方法，但我认为它有点“脏”，您必须使用大量代码来调整它的大小。

综观Google Chrome调试器我看到了，我可以设置一个max-height到svg对象，但我不知道如何更改height当你注入工作区：

var workspace = Blockly.inject('blocklyDiv', 
    {toolbox: document.getElementById('toolbox')}); 

无论如何，这不会根本解决我的问题（只要避免在调整页面大小之前工作区会比div大）。

我也尝试更改我的blocklyDiv，其中我将Blockly workspace注入到display: flex;但它不会改变任何内容。

有没有比Google's更好的方法来调整Blockly workspace的大小？

在此先感谢！

Answer 1

正如我在上面的评论中所说的，我在调整blockly div的高度时允许宽度调整大小。

<div id="blocklyDiv" style="height: 800px; width: 100%;"></div> 

在这里，你有的jsfiddle一起玩： blockly workspace resizing。

Answer 2

我用CSS只得到相同的行为...

只需创建一个容器，你想要的任何大小和相对位置blockly编辑器，然后把blockly编辑器中具有绝对的位置。

HTML代码：

<section id="blocklyContainer"> 
    <div id="blocklyDiv"></div> 
</section> 

CSS代码：

#blocklyContainer { 
    position: relative; 
    width: 100%; 
    height: 100vh; 
} 

#blocklyDiv { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

这里有一个CodePen看到：blockly resize