Canvas-Abmessungen bewirken, dass eine vertikale Bildlaufleiste angezeigt wird

Auf dieser Seite wird eine vertikale Bildlaufleiste angezeigt. Warum ? Wenn ich das Element 'canvas' durch ein Element 'div' ersetze, funktioniert alles einwandfrei. Um die Schriftrolle verschwinden zu lassen, kann ich folgendes ändern:Canvas-Abmessungen bewirken, dass eine vertikale Bildlaufleiste angezeigt wird

Höhe: calc (100% - 80px);

zu:

Höhe: calc (100% - 85px);

Aber das ist nicht richtig, weil ich Platz am unteren Rand der Seite zu verlieren.

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

Quelle

2016-06-11 danilo_lr

Diese Rolle wegen canvas ist, wie es ist standardmäßig ein inline Element.

hinzufügen overflow: hidden zu body

body { 
    overflow: hidden; 
}

oder Sie können durch eine von zwei Möglichkeiten, um zusätzlichen Leerraum von Leinwand entfernen:

.cv {display: block;}
.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>

Quelle

2016-06-11 15:11:59

Fügen Sie diese:

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

weil Leinwand ist standardmäßig ein Inline-Element

Quelle

2016-06-11 15:11:41

Canvas-Abmessungen bewirken, dass eine vertikale Bildlaufleiste angezeigt wird

Antwort

Verwandte Themen