如何将一个高位图表放置在另一个高位图表上

Question

我已经创建了两个图表。第一个包括箱形图/面积图的组合图。第二个是创建多个并排极坐标图的循环。这是jsfiddle：http://jsfiddle.net/civilsurfer/kw20pq8n/14/

请展开图表，以便您可以看到所有极坐标图的下方还有另一个图。

我的目标是使此设置尽可能地响应移动设备。为此，我想让顶部的图表占据屏幕高度的前80％，第二组图表（极性）占据屏幕高度的底端20％。

我遇到的主要问题是，我以更容易理解的方式在脚本的顶部创建了第一个图表的div（和包装器），然后通过javascript的底部创建了一个div。 jsfiddle JS（981行）。我要在包装div中包含极坐标图。相反，现在极坐标图绘制在框图/面积图的顶部。这可能是因为我不知道如何将我在下方（用于极坐标图）创建的该div推到框/面积图下方。

var container2 = document.createElement('div');
container2.style.cssText = 'position: relative; float: left; width: 5%; 
height: 20%; margin-bottom: 0;'
document.body.appendChild(container2);

诚然，我花了很多时间来创建图表，但是我不太擅长CSS并将所有这些部分集成到一个不错的布局中。任何帮助将不胜感激。

这是我正在寻找的总体布局/间距的图像。我通过给框/面积图（800px）设置像素高度来实现这一点，但是在手机上，该图太大了。这就是为什么我要使用％表示高度，希望将框/面积图和极坐标图保留在移动屏幕以及pc屏幕上。

Answer 1

我想我找到了答案。我最终为html和body添加了一些CSS，然后将第二个容器（极坐标图）附加到了包装器上。我将两个容器（图表）都放入包装纸内，将包装纸的高度设为100％，将容器的高度设为75％和15％。

http://jsfiddle.net/civilsurfer/mwzkgvq1/2/

CSS：

html, body {
height:100%;
}
#wrapper {height: 100%;}
#container {position: relative; height: 75%;}