得到奇怪的垂直滚动条

Question

我想要实现的是这个

为了得到这个，我用这种风格制作了一个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：http://jsfiddle.net/5Rrtp/

Answer 1

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

CSS

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