キャンバスのサイズを変更すると、なぜスクロールバーが表示されるのですか？

キャンバスがウィンドウを埋めるページを作った。それは動作しますが、何らかの理由でスクロールバーが表示されます。私は知らない、何がエラーです。キャンバスのサイズを変更すると、なぜスクロールバーが表示されるのですか？

<!doctype html> 
<html> 

    <head> 
    <title>test</title> 
    <meta charset="utf-8" /> 
    <style type="text/css"> 
     #canvas { 
     background-color: #EEEEEE; 
     } 
     * { 
     margin: 0px; 
     } 
    </style> 
    <script type="text/javascript"> 
     function getSize() { 
     var myWidth = 0, myHeight = 0; 
     if(typeof(window.innerWidth) == 'number') { 
      //Non-IE 
      myWidth = window.innerWidth; 
      myHeight = window.innerHeight; 
     } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
      //IE 6+ in 'standards compliant mode' 
      myWidth = document.documentElement.clientWidth; 
      myHeight = document.documentElement.clientHeight; 
     } else if(document.body && (document.body.clientWidth ||   document.body.clientHeight)) { 
      //IE 4 compatible 
      myWidth = document.body.clientWidth; 
      myHeight = document.body.clientHeight; 
     } 
     return {x:myWidth,y:myHeight}; 
     } 

     window.onload = function() { 
     canvas = document.getElementById('canvas'); 
     var size = getSize(); 
     canvas.width = size.x; 
     canvas.height = size.y; 
     }; 
    </script> 
    </head> 

    <body> 
    <canvas id="canvas" width="200" height="200"></canvas> 
    </body> 

</html>

出典

2012-02-12 Danny Fox

は私のためのトリックでした：それは持っているので、特に

#canvas { 
    display: block; 
    background-color: #EEEEEE; 
}

出典

2012-02-12 21:33:22 fixlr

を、キャンバスには、インライン要素は、ありますベースラインは、他のすべてのインライン要素と同様です。そのため、コードはウィンドウのサイズのキャンバスを作成しますが、これはベースラインの上に置かなければなりません。これはブロックの最下部にあります。この場合、キャンバスの垂直方向の配置を変更することもできますが、 'display：block;'がより良い解決策です。 – Neil

あなたのCSSに問題がある可能性があります。

「すべての要素」を上に移動し、キャンバスを安全にするために絶対に配置しました。

これが動作するかどうか、私に教えてください：ブロックに#canvasを切り替え

<style type="text/css"> 
      * { 
       margin: 0px; 
       padding:0px; 
      } 
      #canvas { 
       position:absolute; 
       left:0px; 
       top:0px; 
       background-color: #EEEEEE; 
      } 

</style>

出典

2012-02-12 21:02:30

キャンバスのサイズを変更すると、なぜスクロールバーが表示されるのですか？

答えて

関連する問題