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

Re: [Public WebGL] Mysterious extra padding below canvas

Hi Thatcher,

Your version indeed works for me (Chrome and Firefox on Windows XP). But it breaks if I add

<!doctype html>

as the first line, which is why the version I created yesterday does not work.

I guess in "modern html" body.clientHeight has a different meaning than in old html.



On 16/11/2010 02:02, Thatcher Ulrich wrote:
That's odd; my example works for me in Safari, FF and Chrome on OSX.
I put it here so you can try it verbatim:

There could be issues with the timing of the queries, or if our
platforms/browsers differ.


On Mon, Nov 15, 2010 at 4:01 AM, Mark Callow <callow_mark@hicorp.co.jp> wrote:
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



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:
     <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>

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.


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