You just need to add display block to the canvas
CSS
#paint_canvas {
height: 100%;
width: 100%;
display:block;
}
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/
Solution
You just need to add display block to the canvas
CSS
#paint_canvas {
height: 100%;
width: 100%;
display:block;
}