[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Public WebGL] Mysterious extra padding below canvas

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 adding it.

It has turned out to be absurdly difficult to fill the browser window with my WebGL canvas.



fn:Mark Callow
org:HI Corporation;Graphics Lab, Research & Development
adr:Higashiyama 1-4-4, Meguro-ku;;Meguro Higashiyama Bldg 5F;Tokyo;;153-0043;Japan
title:Chief Architect
tel;work:+81 3 3710 9367 x228
tel;fax:+81 3 5773 8660
url:http://www.hicorp.co.jp,  http://www.mascotcapsule.com