如何在具有自动调整大小的页脚的页面上制作自动调整大小的HTML画布？

Question

我的问题在以下jsfiddle中得到证明。它适用于Chrome，但不适用于Firefox： https://jsfiddle.net/m0u175o8/1/

右侧不应出现粉红色，页脚上方区域应为黑色（帆布）。

我在页面底部有一个页脚。页脚的高度需要根据其内容动态确定。它上方是一块画布，应该占据屏幕的剩余部分。还有一些其他窗格，如标题和侧栏。我把它们包括在jsfiddle中，但我不确定它们对这个问题有影响。

实际上，我的窗格的内容是使用bootstrap 3布局的，所以jsfiddle导入bootstrap。

供参考，这是HTML：

<div class="header">header<div>
<div class="left-pane">scrollable</div>
<div class="right-pane">
  <div class="canvas-wrapper">
    <canvas></canvas>
  </div>
  <div class="bottom-pane">dynamic <br> height <br> footer</div>
</div>

这是我的CSS：

body, html {
  height: 100%;
  color: white;
  text-align: center;
}

.header {
  position: fixed;
  width: 100%;
  height: 20px;
  background: green;
}

.left-pane {
  position: relative;
  float: left;
  width: 25%;
  margin-right: -75%;
  height: 200vw;
  background: blue;
  z-index: 101;
}

.right-pane {
  position: fixed;
  top: 20px;
  padding-bottom: 20px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  padding-left: 25%;
  float: left;
  z-index: 100;
  display: table;
  background-color: pink;
}

.canvas-wrapper {
  height: auto;
  width: 100%;
  display: table-row;
}

.bottom-pane {
  height: 1px;
  width: 100%;
  background: red;
  display: table-row;
}

canvas {
  background: black;
  width: 100%;
  height: 100%;
}