如何將一個高位圖表放置在另一個高位圖表上

Question

我創建了兩個圖表。 第一個包括箱形圖/面積圖的組合圖。 第二個是創建多個並排極坐標圖的循環。 這是jsfiddle： http : //jsfiddle.net/civilsurfer/kw20pq8n/14/

請展開圖表，以便您可以在所有極坐標圖的下面看到另一個圖。

我的目標是使此設置盡可能地響應移動設備。 為此，我想讓頂部的圖表占據屏幕高度的前80％，第二組圖表（極性）占據屏幕高度的底端20％。

我遇到的主要問題是，我以更容易理解的方式在腳本頂部創建了第一個圖表的div（和包裝器），然后通過javascript在jsfiddle JS的底部創建了一個div。 （第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%;}