Css 获取奇怪的垂直滚动条

我想要达到的是

为了得到这个，我用这个样式做了一个div（.toolbar left）

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

我还使用以下样式制作了.paint div：

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

我也在使用这些样式，以防它们与我的问题有关：

*, *: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%;
}

这可以正常工作，但只要我添加宽度和高度为100%的canvas元素，就会添加一个垂直滚动条。 我检查他们的尺寸，所有的东西（div、body和canvas）都有相同的高度

那么，为什么我会得到滚动条

---

编辑：制作一个JSFiddle:

您只需将显示块添加到画布中即可

CSS

---

画一个可以放画布的div？如果是这样的话，我会将

溢出：hidden

属性添加到它是的。它似乎可以工作，但我不想剪裁画布，我希望画布与div的高度相同。我还想知道滚动条的来源。只需添加

display:block到画布上。好的，那就行了，如果你回答我，我会接受的。
#paint_canvas {
    height: 100%;
    width: 100%;
    display:block;
}