yahoo5000 yahoo5000 - 5 months ago 29
CSS Question

Jquery windows.width(height) with overflow

i have a problem with the size of window. I am taking size of window like this

var boxwidth = $(window).width();
var boxheight = $(window).height();


And then create a
canvas


var canvas: document.createElement("canvas"),
start: function() {
this.canvas.width = boxwidth;
this.canvas.height = boxheight;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}


But i got overflow to width and height.

I want to create canvas which fit perfectly a window size. Now, i got a lot of overflow

image

I already add a
margin:0
and
padding:0
to
body

Answer

Well, I tried to find a "normal" solution but I didn't found, so here is a "tricky" solution. This is an idea but I assome that you will need to customize it so it will fit to your project.

The logic is to create a div that it will take the full width and height of the document and set the canvas dimensions according to it. The final step is to restore the states of the elements (html, body etc.)

So:

$('html, body').css({position: 'relative', height: '100%', overflow:'hidden'});
var tester = $('<div style="width:100%;height:100%" />').appendTo(document.body);
$('canvas').css({
  width:$('body').width(),
  height:tester.height()
});
tester.remove();
$('html, body').removeAttr('style');
html, body {
  margin:0;  
}

canvas {
  background:red;
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>

http://jsbin.com/pinide/edit?html,css,js