css - Div 的高度得到扩展，但元素出现在 div 的工作空间之外

Question

我想做这个简单的任务。我有以下用于 div 和 ExtJS panel 的代码。 <强> DEMO

#drawing 
{
    position: absolute;
    border: solid 2px green;
    width:    100%;
    height:   300
}

和

var contentPanel =  Ext.create('Ext.panel.Panel', 
{
     title: '',
     region: 'center',
     margins: '2 0 0 0',
     border: false,
     autoScroll: true,
     contentEl: 'drawing',
});

创建 View 后，所有内容都被渲染，我正在调用一些 JS 函数，该函数应该根据某些条件调整 div 的高度。

我有 yCoord 变量在程序中递增，一旦它达到 contentPanel 的高度，我想使用以下代码扩展它的 div 高度:

if (yCoord > contentPanel.getHeight() - 200)
{
    document.getElementById('drawing').setAttribute("style", "height:"+ (2*yCoord) + "px"); 
}

很简单吧？

但这就是我遇到的问题......
设置高度后，我可以看到面板上的垂直滚动条已扩展，“这意味着工作区已扩展”。 但是当您点击第 4 次时，矩形会离开工作区。为什么？

Answer 1

您忘记调整拉斐尔 Canvas 的大小:

p.setSize('100%', 2*yCoord+contentPanel.getHeight());