¿Cómo puedo eliminar la altura extra del lienzo html5?

Estaba probando el elemento de lona html5 y deseo que mi lienzo sea de pantalla completa en el área de visualización. Pero descubrí que si configuro la altura del lienzo en window.innerHeight, la barra de desplazamiento se mostrará hacia arriba. Intenté y encontré la necesidad de establecer la altura en 5 píxeles menos, la barra de desplazamiento desaparecerá, pero desafortunadamente dejó un borde blanco debajo del lienzo. Si es un elemento div, todo está bien.¿Cómo puedo eliminar la altura extra del lienzo html5?

El código que estoy usando para la prueba es:

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<script type="text/javascript"> 
function load() { 
    var o = document.getElementById('canvas'); 
    if (o) { 
     o.width = window.innerWidth; 
     o.height = window.innerHeight - 5; 
    } 
    o = document.getElementById('div'); 
    if (o) { 
     o.style.width = window.innerWidth + 'px'; 
     o.style.height = window.innerHeight + 'px'; 
    } 
} 
</script> 
<style type="text/css"> 
* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    background-color: white; 
} 
#canvas { 
    background-color: blue; 
} 
#div { 
    background-color: green; 
} 
</style> 
</head> 
<body onload="load();"> 
<canvas id="canvas"></canvas> 
<!--div id="div"></div--> 
</body> 
</html>

He despejado el margen del cuerpo y el relleno.

Lo pruebo en Chrome 8.0.552, y también funciona igual en Firefox 3.6.13 pero 4 píxeles menos está bien.

¿Algo que me haya perdido? Cualquier sugerencia será realmente apreciada. Muchas gracias.

Fuente

2011-01-24 tiefeng

De forma predeterminada canvas, a diferencia de div, es display: inline; por lo que se establece en vertical-align: baseline;. Usted puede tomar cualquiera de los siguientes métodos para hacer las cosas de forma natural llenan el window.innerHeight:

#canvas { 
    background-color: blue; 
    vertical-align: top; 
}

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

Fuente

2011-01-24 19:55:08 robertc

¿Cómo puedo eliminar la altura extra del lienzo html5?

Respuesta

Cuestiones relacionadas