我在 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/
由于某种原因,虽然有一个意外的垂直滚动条。
当您向下滚动时,两个框的底部会出现几个像素的空白/边距。
有谁知道为什么会这样,我该如何解决?
提前致谢。
最佳答案
滚动条是由 Canvas 引起的,解决这个问题需要添加display: block;
#game-canvas {
width: 100%;
height: 100%;
display: block;
}
关于html - 为什么位置绝对div的底部有几个像素的空白边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43388041/