當我調整畫布大小時，爲什麼會出現滾動條？

我做了一個頁面，畫布應該填滿窗口。它可以工作，但出於某種原因滾動條出現。我不知道，錯誤是什麼。當我調整畫布大小時，爲什麼會出現滾動條？

<!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以塊爲我做的伎倆：

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

來源

2012-02-12 21:33:22 fixlr

特別是，畫布是一個內聯元素，所以它有一個基線，就像所有其他內聯元素一樣。因此，代碼創建了一個與窗口大小相同的畫布，但它必須位於塊底部之上的基線上。在這種情況下，更改畫布的垂直對齊方式也會起作用，但是'display：block;'是更好的解決方案。 – Neil 2012-02-12 21:45:39

這可能是您的CSS的問題。

我將'所有元素'移到頂部，並且爲了安全起見將畫布完全定位。

讓我知道，如果這個工程：

<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

當我調整畫布大小時，爲什麼會出現滾動條？

回答

相關問題