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

Re: [Public WebGL] Mysterious extra padding below canvas

Hi Thatcher,

Thank you very much for your kind help. I really liked the idea of the div locator, then I realized that I can achieve the same end by simply querying the getOffsetTop() on my canvas.

Unfortunately, your example suffers from the same issue that prompted my posting in the first place: body.clientHeight returns a height that accomodates the elements on the page at their current size. In the case of your example it returns 78, while tl.getOffsetTop() returns 94. It looks like the height only goes to the bottom of the button and does even include padding, border & margin below the button. So I never see the blue div.

Because of this, I need to use window.innerHeight and therefore still need to know the heights of the body padding, border and margin so I can subtract them at the bottom. Until I can figure out how to query or calculate these values, I am setting them myself and saving the values for later use in resize.



On 12/11/2010 19:43, Thatcher Ulrich wrote:
Re scrollbars -- on the body element, set "overflow: hidden;" to
inhibit scrollbars.


On Fri, Nov 12, 2010 at 11:40 AM, Thatcher Ulrich <tu@tulrich.com> wrote:
This sort of works for me -- using a 0x0 div to locate the top of the
canvas area, and doing body.clientHeight - locator.offsetTop to
compute the remaining height.

There are some wrinkles having to do with when the body
clientHeight/clientWidth is queried, and scrollbars, but you can
probably work that out.



     function resize_blue_div() {
       var b = document.body;
       var tl = document.getElementById("top_locator");
       var bd = document.getElementById("blue_div");

       bd.style.height = (b.clientHeight - tl.offsetTop) + "px";
       bd.style.width = b.clientWidth + "px";
 <body style="width: 100%; height:100%; background-color: red;
margin: 0px; padding: 0px;">
   <p>One line of text.</p>
   <p><input type="button" value="resize blue div"
   <div id="top_locator" style="position: absolute; width: 0px; height: 0px;">
     <div id="blue_div" style="background-color: blue; margin: 0px;
padding: 0px;">

On Fri, Nov 12, 2010 at 10:35 AM, Mark Callow <callow_mark@hicorp.co.jp> wrote:
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

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>

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