In my efforts to size a canvas to fill the browser window, I have found the browsers are adding some mysterious padding below the canvas element. I have created the attached simple show-gap.html to illustrate the problem. It encloses the canvas in a <div> element with a red border so you can clearly see the space. The div's height is set to 100%. All padding and margins and set to 0 as is the canvas border. The result is the same in both Chrome & Firefox 4.
Instead of doing the calculation myself, I tried setting the
width & height of the canvas to 100% in the canvas's style. In
this case the result differs between browsers with both
unsatisfactory. Firefox has a large white space below the canvas,
much larger than the gap show by the first example, and no
vertical scrollbar. Chrome fills the visible window with the
canvas and adds a scrollbar so you can scroll this mysterious
extra white space into view. The extra white space looks like the
same height as that in shown by the first example.
After more than an hour perusing css box information, I have
failed to find an answer. Can anyone tell me why this white space
is there, and how I can determine it's height so I compute my
canvas size accordingly. Or, even better, prevent the browsers
It has turned out to be absurdly difficult to fill the browser
window with my WebGL canvas.
begin:vcard fn:Mark Callow n:Callow;Mark org:HI Corporation;Graphics Lab, Research & Development adr:Higashiyama 1-4-4, Meguro-ku;;Meguro Higashiyama Bldg 5F;Tokyo;;153-0043;Japan email;internet:firstname.lastname@example.org title:Chief Architect tel;work:+81 3 3710 9367 x228 tel;fax:+81 3 5773 8660 x-mozilla-html:TRUE url:http://www.hicorp.co.jp, http://www.mascotcapsule.com version:2.1 end:vcard