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

Re: [Public WebGL] Mysterious extra padding below canvas



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: