html - 为什么位置绝对div的底部有几个像素的空白边距

Question

我在 HTML 中有两个框

<div id="left" class="component">
</div>
<div id="game" class="component">
    <canvas id="game-canvas"></canvas>
</div>

左边一个，右边一个。这是我用于定位它们的 CSS:

.component {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0px;
}

#game {
    left: 50%;
    background-color: black;
}

#game-canvas {
    width: 100%;
    height: 100%;
}

#left {
  left: 0px;
  background-color: green;
  color: white;
}

我还使用以下 CSS 去除任何填充或边距

* {
    padding:0px;
    margin:0px;
}

这是一个 JSFiddle 链接:https://jsfiddle.net/odgo22yb/2/

由于某种原因，虽然有一个意外的垂直滚动条。

当您向下滚动时，两个框的底部会出现几个像素的空白/边距。

有谁知道为什么会这样，我该如何解决？

提前致谢。

Answer 1

滚动条是由 Canvas 引起的，解决这个问题需要添加display: block;

#game-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

See jsfiddle