div triangle, canvas size - css

Question

In this JSFiddle example 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.
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.
I've given my canvas class the following properties:
.fitcanvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 1px solid black;
}
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.
What did I do wrong?

Answer 1

In your fiddle, you have given a 11% height to top and bottom css class, but to the remaining divs, it used .content which is 26% in height. This is making heights uneven. You can give 25% to all to make them of same height.
Your labels are overlapping your canvas area, because, you have given 100% height to canvas w.r.t its container, and the container includes label as well. Hence the problem. Please check fiddle here
The css looks like:
* {
box-sizing: border-box;
}
html,
body,
.wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 1px solid black;
}
.left,
.right {
float: left;
}
.left {
position: relative;
width: 10%;
height: 100%;
}
.left .label-top,
.left .label-bottom {
position: absolute;
width: 100%;
background-color: #fff;
}
.left .label-top {
top: 0;
left: 0;
}
.left .label-bottom {
bottom: 0;
left: 0;
}
.left .content,
.left .top,
.left .bottom {
border: 1px solid white;
}
.left .top,
.left .bottom {
height: 25%;
}
.left .content {
height: 25%;
}
.colourred {
background-color: red;
}
.colourgreen{
background-color: green;
}
.colourblue {
background-color: blue;
}
.right {
width: 85%;
height: 100%;
background-color: gray;
}
.right::after {
content: '';
display: table;
clear: both;
}
.slider {
}
.fitcanvas {
max-width: 100%;
height: 100%;
border: 1px solid black;
margin:1px;
}