Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorandrisig
    • CommentTimeJun 1st 2006
     permalink
    I'm using this trick from Quirksmode.org to get the first DIV in my page to fill the browser window vertically. The DIV also has a background image, the problem is that the DIV is not stretching all the way down if the vertical scrollbar is needed. Instead there is a fairly large gap (20px) at the bottom of the page.

    This problem seems to include most browsers (IE6, Safari, Camino).

    Moving the background image to the BODY tag is not an option for me.

    Any suggestions? :) thx.
    •  
      CommentAuthorJan Meeus
    • CommentTimeJun 1st 2006
     permalink
    Can you provide an example of your page?
    Maybe your stretching div has a margin or padding or you don't have the body's padding set to 0.

    Try putting the following in your css to test if it's a padding/margin problem:

    * {
    margin: 0px;
    padding: 0px;
    }
    • CommentAuthorandrisig
    • CommentTimeJun 1st 2006
     permalink
    Thx, but I already have that in the stylesheet ;)

    I just thought this was a know issue or somthing, or I was hoping it was.
    • CommentAuthorphilmorley
    • CommentTimeJun 1st 2006 edited
     permalink
    Im having the same problem
    • CommentAuthorandrisig
    • CommentTimeJun 2nd 2006
     permalink
    What I think is going on is that the browsers reserves space for both vertical and horizontal scrollbars even if the vertical one is only needed. Maybe there is a JS solution. I will post my findings later today.
    • CommentAuthorGrump
    • CommentTimeJun 12th 2006
     permalink
    JS will fix this...

    something like this... you'll have to fiddle with the sizing based on where you're using it... this works in IE... not sure about other browsers, but there is bound to be an equiv... pop it in a function and add it to the resize and onload commands for the window... like:

    function resize_iframes(){
    document.getElementById('main_frame').height=document.body.offsetHeight ± 20;
    }

    window.onresize=resize_iframes;
    window.onload=resize_iframes;

    works in my application, so if the code above fails fiddle with it till it does...

    Cheers,
    Owen
    • CommentAuthorcoldek
    • CommentTimeJun 19th 2006
     permalink
    Maybe set the overflow of the body to none? this way the scrollbars will never be shown in the body. Although that wouldn't be a very clean solution.
Add your comments
    Username Password
  • Format comments as (Help)