Javascript 在a<；部门>；似乎比<；部门>；自身和重叠

我正在使用

Canvas.js

创建图形，我在

中放置了一个图形，它在底部两侧重叠。我尝试在最初的代码中创建另一个

，但没有成功

以下是相关的html：

<div class="box" id="gdpbox">
        <script type = 'text/javascript'>
        var gdpChart = new CanvasJS.Chart("gdpbox", {
        title: {
            text: "Gross Domestic Product"
        },
        data: [{
            type: "line",
            dataPoints: [

                //I took out about 500 data points, these are just for reference

                { x: new Date(2013,07,01), y: 15779.9}, 
                { x: new Date(2013,10,01), y: 15916.2}, 
                { x: new Date(2014,01,01), y: 15831.7}, 
                { x: new Date(2014,04,01), y: 15985.7},

            ]
        }]
    });
    gdpChart.render();
    gdpChart = {};    
        </script>
        </div>

对于gdpbox：

#gdpbox{    
    border: solid #60C3B1;
    position:absolute; 
    margin: 5% 13% auto;
}

以下是图形当前的外观：

它应该装在蓝绿色的盒子里

希望这足够详细，以显示我做错了什么。如果需要，我可以提供更多细节

---

我意识到默认的图形大小是500px，这就是导致它重叠的原因。但是现在我不知道如何将图形放在我的方框内，因为方框没有设置大小。

JSFIDLE或codepen将有助于解决这个问题。我想您已经尝试过#gdpbox的CSS样式，而不仅仅是内部div？我想你无论如何都应该把里面的div去掉。纳米。我看你有。尽管如此，密码笔仍然会有所帮助。是否正在使用

框大小：边框框

？

#gdpbox{    
    border: solid #60C3B1;
    position:absolute; 
    margin: 5% 13% auto;
}