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元素，就会添加垂直滚动条。
我检查它们的大小，所有东西（divs，body和canvas）的高度都相同。

那么，为什么我要使用滚动条？

编辑：做了一个JSFiddle：http://jsfiddle.net/5Rrtp/

最佳答案

您只需要在画布上添加显示块

的CSS

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

关于css - 变得奇怪的垂直滚动条，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23310148/