爲什麼會出現空白頁邊的位置絕對的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

滾動條是由帆布造成的，解決需要添加display: block;

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

See jsfiddle

Answer 2

底部的白色空間是由帆布導致此問題。您可以將其移除，或者只需在#game-canvas上放置display: block以解決此問題。檢查下面的代碼段代碼。

* { 
 
     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; 
 
    }

<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>