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

Re: [Public WebGL] Mysterious extra padding below canvas

I have a line of text in a <div> followed by a block canvas. I want to size the canvas so it fills the rest of the window below the line of text. If I set the canvas's CSS height to 100% the canvas is given a size equal to the window  size less the body's margin, border and padding. Therefore the combination of the line of text and the canvas is too big for the window. A scrollbar appears and the bottom part of my canvas is cut off.

To size the canvas myself, I need to do something like the following pseudo-code:

canvasHeight = window.innerHeight - body margin height * 2 - body padding height * 2 ;
canvasHeight -= body border height * 2;
canvasHeight -= text label height; (including any margin on the text);

clientHeight gives me the content area height + padding. offsetHeight gives me clientHeight + border. So I can see how to get the border height but not how to get margin and padding heights.



On 12/11/2010 18:19, Thatcher Ulrich wrote:
What exactly are you trying to measure?  You might be able to get what
you want by putting a spacer DIV where you want the canvas area (with
block positioning) and let the canvas have absolute positioning in the
same spot.  The DIV will participate in the page layout, and you can
control the canvas layout by querying the DIV and setting the canvas
size via _javascript_.

Though I'm not sure what your goal is.  There may be a simpler way to
get what you want.


On Fri, Nov 12, 2010 at 9:52 AM, Mark Callow <callow_mark@hicorp.co.jp> wrote:
When I have other elements on a page together with a canvas, in order to
compute an ideal canvas size, I need to query, or compute, things like the
margin, border and padding heights of elements, particularly the body
element. I have not so far found any way through the DOM to obtain this
information.  The queries I've found return (content area + padding) or
(content area + padding + border). I have found no query whose result is
influenced by the margin nor any to tell me the padding.

Style queries return empty strings unless a style is actually set on the
element so are useless for elements having default settings.

Can anyone suggest a way to determine this information?



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