2016-06-11 3 views
1

このページには、垂直スクロールバーが表示されます。どうして ?私が 'canvas'要素を 'div'要素で置き換えると、すべて正常に動作します。 スクロールを消すには、次のように変更することができます。キャンバスの寸法によって垂直スクロールバーが表示される

高さ:calc(100% - 80px);

から:

高さ:calc(100% - 85px);

しかし、私はページの下部に損失スペースがあるので、これは正しくありません。

<!DOCTYPE html> 
<html lang="en-us"> 

<head> 
    <style> 
     html { 
      padding: 0px; 
      border: 0px; 
      margin: 0px; 
      height: 100%; 
      width: 100%; 
     } 

     body { 
      padding: 0px; 
      border: 0px; 
      margin: 0px; 
      height: 100%; 
      width: 100%; 
      background: #00FFFF; 
     } 

     .top { 
      padding: 0px; 
      border: 0px; 
      margin: 0px; 
      background-color: #FF0000; 
      width: 100%; 
      height: 80px; 
     } 

     .cv { 
      padding: 0px; 
      border: 0px; 
      margin: 0px; 
      background-color: #00FF00; 
      width: 100%; 
      height: calc(100% - 80px); 
      border-image-width: 0px;  
     } 
    </style> 

</head> 

<body> 

    <div class="top"> 
    </div> 

    <canvas class="cv"> 
    </canvas> 

</body> 

</html> 

答えて

3

ですので。

body

body { 
    overflow: hidden; 
} 

overflow: hiddenを追加したり、次の2つの方法のいずれかによってキャンバスの余分な空白を削除することができます

  1. .cv {display: block;}
  2. .cv {vertical-align: top;}

html { 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #00FFFF; 
 
} 
 

 
.top { 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
    background-color: #FF0000; 
 
    width: 100%; 
 
    height: 80px; 
 
} 
 

 
.cv { 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
    background-color: #00FF00; 
 
    width: 100%; 
 
    height: calc(100% - 80px); 
 
    border-image-width: 0px; 
 
    display: block; 
 
}
<div class="top"> 
 
</div> 
 

 
<canvas class="cv"> 
 
</canvas>

1

これを追加します。

.cv { 
     display: block; /* ADD ME!!!! */ 

キャンバスは、それがデフォルトでinline要素であるとして、このスクロールが原因canvasであり、デフォルトでは、インライン要素

関連する問題