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

Re: [Public WebGL] Mysterious extra padding below canvas



Re scrollbars -- on the body element, set "overflow: hidden;" to
inhibit scrollbars.

-T

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.
>
> -T
>
> ----
>
> <html>
>  <head>
>    <script>
>      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";
>      }
>    </script>
>  </head>
>  <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"
> onclick="resize_blue_div()" />
>    <div id="top_locator" style="position: absolute; width: 0px; height: 0px;">
>    <div>
>      <div id="blue_div" style="background-color: blue; margin: 0px;
> padding: 0px;">
>      </div>
>    </div>
>  </body>
> </html>
>
>
> 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
>> 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.
>>
>> Regards
>>
>> -Mark
>>
>>
>>
>> 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.
>>
>> -T
>>
>> 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?
>>
>> Regards
>>
>> -Mark
>>
>>
>

-----------------------------------------------------------
You are currently subscribed to public_webgl@khronos.org.
To unsubscribe, send an email to majordomo@khronos.org with
the following command in the body of your email: