Getting weird vertical scrollbar

Question

What I want to achieve is this

To get this, I made a div (.toolbar-left) with this style

.left-toolbar {
    width: 300px;
    background: #ddd;
    padding: 15px;
    float: left;
    height: 100%;
}

I also made the .paint div with this style:

.paint {
    margin-left: 300px;
    height: 100%;
}

I'm also using these styles in case they have something to do with my problem:

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', 'sans-serif';
    font-size: 14px;
    height: 100%;
}

This works properly, but as soon as I add a canvas element with width and height 100%, a vertical scrollbar gets added. I check their sizes and everything (divs, body and canvas) have the same height.

So, why am I getting the scrollbar?

EDIT: Made a JSFiddle: http://jsfiddle.net/5Rrtp/

Answer 1

You just need to add display block to the canvas

CSS

#paint_canvas {
    height: 100%;
    width: 100%;
    display:block;
}