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

滚动条是由画布引起的，用于解决您需要添加display: block;

的问题

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

See jsfiddle

Answer 2

底部的空白区域是由画布引起的。您可以将其删除，也可以只将display: block放在#game-canvas上进行修复。请查看下面的代码段。

＆＃13;

    * {
        padding: 0px;
        margin: 0px;
    }

    .component {
        position: absolute;
        width: 50%;
        height: 100%;
        margin: 0px;
    }

    #game {
        left: 50%;
        background-color: black;
    }

    #game-canvas {
        width: 100%;
        height: 100%;
        display: block;
    }

    #left {
        left: 0px;
        background-color: green;
        color: white;
    }

＆＃13;

<div id="left" class="component">
    Why is there a scrollbar and a few pixels of white space at the bottom of both divs?
</div>

<div id="game" class="component">
    <canvas id="game-canvas"></canvas>
</div>

＆＃13;

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

2 个答案: