Resolution Independent Websites? (or, "scaling An Entire Website To Fill The Browser")

I'm working on a project that would really benefit from filling the whole screen -- it's essentially one 7000px-long page with a giant background filling the whole length (probably

Solution 1:

The script also calculate the scrollbar size if needed. You will need a block (div, span, etc...) with the wrapper id.

This is a cross-browser script, it supports all the modern browsers.

I hope you like it. Feel free to use!

// DONT FORGET TO ADD THIS TO YOUR WRAPPER'S CSS BLOCK// THIS WILL KEEP YOUR SITE CENTERED// IF YOU USE margin-left:auto; margin-right:auto;// transform-origin: 50% 0%;// -ms-transform-origin: 50% 0%;// -moz-transform-origin: 50% 0%;// -webkit-transform-origin: 50% 0%;// -o-transform-origin: 50% 0%;functionFitToScreen(FitType)
{
    varWrapper = document.getElementById('wrapper');

    varScreenWidth = window.innerWidth;
    varScreenHeight = window.innerHeight;

    varWrapperWidth = Wrapper.offsetWidth;
    varWrapperHeight = Wrapper.offsetHeight + 200;

    varWidthRatio = parseFloat(ScreenWidth/WrapperWidth);
    varHeightRatio = parseFloat(ScreenHeight/WrapperHeight);

    varScaleRatio = 1.0;

    if (FitType == 'width')
    {
        ScaleRatio = WidthRatio;
        if(ScaleRatio * WrapperHeight > ScreenHeight)
        {
            ScaleRatio = parseFloat(ScreenWidth/(WrapperWidth + GetScrollBarWidth () -1));
        }
    }
    elseif (FitType == 'height')
    {
        ScaleRatio = HeightRatio;
        if(ScaleRatio * WrapperWidth > ScreenWidth)
        {
            ScaleRatio = parseFloat(ScreenHeight/(WrapperHeight + GetScrollBarWidth () -1));
        }
    }

    varScaleText = 'scale(' + ScaleRatio.toString().replace(',','.') + ')';

    //Chrome and SafariWrapper.style.webkitTransform = ScaleText;
    //FirefoxWrapper.style.MozTransform = ScaleText;
    //Internet ExplorerWrapper.style.msTransform = ScaleText;
    //OperaWrapper.style.OTransform = ScaleText;
    //StandardWrapper.style.transform = ScaleText;
}

functionGetScrollBarWidth ()
{
    var inner = document.createElement('p');
    inner.style.width = '100%';
    inner.style.height = '200px';

    var outer = document.createElement('div');
    outer.style.position = 'absolute';
    outer.style.top = '0px';
    outer.style.left = '0px';
    outer.style.visibility = 'hidden';
    outer.style.width = '200px';
    outer.style.height = '150px';
    outer.style.overflow = 'hidden';
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);
    return (w1 - w2);
}