David Callanan David Callanan - 6 months ago 21
CSS Question

Why is there a few pixels of white space margin at the bottom of position absolute divs

I have two boxes in the HTML

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


One on the left, one on the right. Here is my CSS for positioning them:

.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;
}


I also use the following CSS to get rid of any padding or margin

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


Here is a JSFiddle link: https://jsfiddle.net/odgo22yb/2/

For some reason though there is an unexpected vertical scrollbar.

When you scroll down there is a few pixels of white space / margin on the bottom of the two boxes.

Does anyone know why this is happening and how I can fix this?

Thanks in Advance.

Answer Source

The scrollbar is caused by the canvas, to resolve the issue you need to add display: block;

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

See jsfiddle