Css 调整div和其中的画布（使用chart.js）以匹配父级高度

我是CSS的初学者，我正在尝试创建一个包含一些表和图表的页面（使用chart.js）。 我的目标是让一个div填满页面宽度的100%，并在其中包含两个div：

图表附近有表格的div-屏幕的66%

1a。表将占div的75%

1b。查特将接管该部门剩余的25%

有图表的div-33%

或者让它更直观：类似这样：

紫色是主分区，蓝色是主分区内的两个分区（66%和33%），红色（浅红色和深红色）是分区表，分区包含25%的图表。黄色是图表的画布

为了实现这一点，我写了如下内容（为了简单起见，我忽略了图像中显示的其他样式属性[如填充、边距等]：

...

如我所料，紫色主div大小由表div确定的左侧蓝色div大小确定。与我所料不同的是，包含图表的div没有延伸到其父div的全高，而是得到了这个奇怪的比率：

更改图表div大小的唯一方法（如第一张图中所示）是将画布设置为固定大小：

（这不够好，因为我希望它与每个屏幕对齐。尝试设置画布样式属性根本不会更改画布

我想我在这里遗漏了一些非常基本的东西，但即使在阅读了这些答案之后：

---

我仍然无法修复它。

是的……chartJS有一个恼人的习惯，即根据需要调整画布的大小。请尝试设置

MaintaintAspectratio:false

。这确实做了更改，但还没有解决问题。现在看起来是这样的：我还尝试使用JQuery:

var PieCanvas=d设置画布高度以匹配表高度document.getElementById（“pieCanvas”）；canvas.height=$（“#tableDiv”）.height（）；

但它只有在没有图表的情况下才起作用：你设置了

响应：true

吗？是的，我设置了。有了

响应：false

我得到：是的……chartJS有一个恼人的习惯，就是按自己的意愿调整画布的大小。试着设置

MaintaintAspectratio:false

。这确实做了一些更改，但还没有解决问题。现在看起来像是t他的：我还尝试使用JQuery设置画布高度以匹配表格高度：

var PieCanvas=document.getElementById（“PieCanvas”）；canvas.height=$（“#tableDiv”）.height（）；

，但它只在没有图表的情况下起作用：是否设置了

响应：true

？是的。使用

响应：false

我得到：

<div id="mainPurple" style="width: 100%;">
    <div id="leftBlue" style="width: 66%;">
        <div id="table" style="width: 75%;">
            <table>...</table>
        </div>
        <div id="donutContainer" style="width: 25%; height: 100%;">
            <canvas id="donutChart"></canvas>
        </div>
    </div>
    <div id="rightBlue" style="width: 33%; height: 100%">
        <canvas id="pie"></canvas>
    </div>
</div>