css - 获取奇怪的垂直滚动条

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、正文和 Canvas )都具有相同的高度。

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

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

Answer 1

你只需要在 Canvas 上添加显示 block

CSS

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