Configuración de alto y ancho del elemento de lienzo en window.innerHeight/innerWidth que causa barras de desplazamiento

Esto es extremadamente directo, pero no puedo entender por qué está causando las barras de desplazamiento. Aquí está el código:Configuración de alto y ancho del elemento de lienzo en window.innerHeight/innerWidth que causa barras de desplazamiento

CSS

body, canvas, html{margin:0;padding:0;border:0 none;} 
canvas{background:Black;}

HTML

<html> 
    <head></head> 
    <body></body> 
</html>

JavaScript

var canvas = document.createElement("canvas"); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
document.getElementsByTagName("body")[0].appendChild(canvas);

No debería esto sólo ser la causa de la tela para cubrir la ancho y alto o f la ventana visible? He aquí un ejemplo jsFiddle: http://jsfiddle.net/TyJYH/

Fuente

2012-07-02 BenR

Podría ser que los elementos, cuerpo y html, estén agregando margen o relleno alrededor del lienzo. Puede hacer que la posición del lienzo sea absoluta o fija, o establecer explícitamente los márgenes y los rellenos en 0. – kennebec

que resolvieron este mismo problema estableciendo la propiedad CSS display de la etiqueta canvas de "bloqueo".

canvas { 
    display: block; 
}

Fuente

2013-04-04 07:04:24 mudphone

MUCHAS GRACIAS, leí muchas preguntas antes de encontrar esta respuesta. La solución más loca que encontré fue 'posicionar: fijó' una imagen transparente en la esquina inferior derecha de la ventana y la usé para obtener mediciones. ¡Eso fue aceptado y votado! –

D'oh! Me acabo de dar cuenta de que cuando '

Esto lo arreglará:

canvas { 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    top:0; 
}

Fuente

2012-07-02 22:35:32 RhinoWalrus

. Gracias por su contribución. Esto es más una especie de 'hack'. Mi preocupación radica más en por qué especificar que un elemento tenga el mismo alto/ancho que la ventana visible está causando una barra de desplazamiento, aunque estoy especificando que todos los elementos habilitados tengan margen cero, relleno y bordes. – BenR

http://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport. Menos 'hacky'. :-) – RhinoWalrus

Configuración de alto y ancho del elemento de lienzo en window.innerHeight/innerWidth que causa barras de desplazamiento

Respuesta

Cuestiones relacionadas