現状

キャンバスに任意の画像をアップロードし、キャンバスに描画する機能を実装しています。
下記リンク先で動作をご確認いただけます。

demo

キャンバスに画像を読み込むと、キャンバスとフッターがフェードインします。
フッターはスクロールに追尾します。

使用しているライブラリ

・jQuery
・Fabric.js

問題点

一番下までスクロールしても、フッターがキャンバスに被ってしまいます。
縦長の画像を読み込んでいただくと、問題となっている状態が分かりやすいです。

縦長の画像を用意したので、よろしければご使用ください。
画像出典：pixabay

サンプル画像

解決したいこと、ご助力いただきたいこと

一番下までスクロールした際、フッターがキャンバスに被らないようにしたいです。
また、デバイスやディスプレイサイズを問わない方法で解決したいです。

試したこと

CSSで#cnvAreaにpadding-bottomを設定すると、一番下までスクロールした際の、フッターとキャンバスの被りを回避できました。

しかしpadding-bottomで設定した値は、ディスプレイのサイズによって必要な値が異なります。
例えば上記のdemoで言うと、Outputタブのみを表示した場合の大きいウインドウサイズでは被りを回避できましたが、HTML、CSS、JavaScriptタブを表示した場合の小さいウインドウサイズでは、被りを回避できませんでした。

ソースコード

$('#file').on('change', function () {
    $('#view').fadeIn();
    var fr = new FileReader();
    fr.onload = function (e) {
        input(e.target.result);
    };
    fr.readAsDataURL(this.files[0]);
});

var canvas = new fabric.Canvas('c');

var input = function (url) {
    fabric.Image.fromURL(url, function (img){
      var wS = canvas.width / img.width;
      img.scale(wS);
      canvas.setHeight(img.height * wS);
      canvas.clear();
      canvas.add(img).renderAll();
      img.selectable = false;
    });
};
html{
  text-align: center;
}

#view{
  display: none;
}

.canvas-container{
 margin: auto
}

/* #cnvArea{
  padding-bottom: 25%;
} */

canvas{
  border: 2px solid black;
}

#optArea{
  min-height: 40%;
  position: fixed;
  width: 100vw;
  left: 0;
  bottom: 0;
  background-color: black;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
  </head>
  <body>
    <input id="file" type="file" accept="image/*">
    <div id="view">
      <div id="cnvArea">
        <canvas id="c" width="700"></canvas>
      </div>
      <div id="optArea">
        <input type="range" id="value" value="0.5" min="0" max="1" step="0.01">
        <br>
        <button>a</button>
        <button>b</button>
        <button>c</button>
        <button>d</button>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js"></script>
    </body>
</html>