title: div triangle, canvas size
body: <p><a href="https://jsfiddle.net/RobinsonUK/ryut6omv/4/" rel="nofollow noreferrer">In this JSFiddle example</a> I've made a screen layout using divs and css, then added a canvas element inside each region with a black border so I can see its extent.</p>
  
  <p>In this screenshot you can see the borders are correct for the 3 main elements of the left side-bar, but the top and bottom elements are cut off as if underneath the label div element.</p>
  
  <p><img src="https://i.stack.imgur.com/gWosX.png" alt="enter image description here"></p>
  
  <p>I've given my canvas class the following properties:</p>
  
  <pre><code>.fitcanvas {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 1px solid black;    
  }
  </code></pre>
  
  <p>The intention is for the canvas to fill the area remaining (or 100% if there's nothing else in the parent).  I've tried putting it inside another div but cannot get it to work correctly.  </p>
  
  <p>What did I do wrong?</p>