Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Re: Noob Q on having elements fill their parents

Expand Messages
  • Kenny Tilton
    ... Thanks, it does, in part because I was starting to wonder if I should just go with a 1px high footer and that that would magically make it all happen. But
    Message 1 of 7 , Nov 14, 2008
    • 0 Attachment
      D. Wayne Fincher wrote:
      >
      >
      > I've had a situation where I wanted a column's background to stretch
      > from the header to the footer, but because it's dependent on the
      > content in the column to set it's height, the column doesn't fill the
      > space from the header to the footer. I.e., there's a sport under the
      > column where the bg for the main content shows.
      >
      > To counter that, I programatically check the bottom position of the
      > main content and the bottom position of the column and then I sync
      > them up.
      >
      > Here's the code I used:
      >
      > (function () {
      > var Dom = YAHOO.util.Dom,
      > Region = YAHOO.util.Region,
      > bdBlock,
      > bdBlockRegion,
      > sideBar,
      > sideBarRegion,
      > newHeight;
      >
      > sideBar = Dom.get('sideBar');
      > bdBlock = Dom.get('bd');
      > sideBarRegion = Region.getRegion(sideBar);
      > bdBlockRegion = Region.getRegion(bdBlock);
      >
      > if (bdBlockRegion.bottom > sideBarRegion.bottom) {
      > newHeight = bdBlockRegion.bottom - sideBarRegion.top;
      > sideBar.style.height = newHeight + 'px';
      > }
      >
      >
      > }());
      >
      > So, bdBlock is the body or main content and sideBar is is my column.
      > Hopefully this hits on something you can use. Works like a charm. My
      > column always fills up the available vertical space. Perhaps you might
      > have to rework it a bit, like for instance, you might have to call
      > this code any time the size of the grid changes. For my page, I only
      > need to do this when the page loads. Each page on my website has a
      > different height on the main content due to varying content, so it
      > just needs to be synced once.
      >
      > Hope that helps.

      Thanks, it does, in part because I was starting to wonder if I should
      just go with a 1px high footer and that that would magically make it all
      happen. But I see I will have to relay the constraint I have in mind by
      hand. :( I saw this in the "layout in panel" example (I may have
      mentioned that above) and suspected as much.

      Maybe I should port my Cells package from Lisp to JS, it transparently
      (as far as is possible given the language syntax) let's one say things
      like "my bottom value will leave my bottom edge N pixels above my parent's".

      cheers, ken
    Your message has been successfully submitted and would be delivered to recipients shortly.