绝对div元素的Javascript和CSS缩放

Question

I have some issues with positioning of an absolute div in relation to another absolute div when using transform scale.

First I have a footer which is positioned at the bottom of the screen (window.innerHeight - footer_height) then i have another larger div above the footer that i want to position at the edge of the footer. ((window.innerHeight - footer_height)-largediv_height)

this works fine until i try to set a transform scale of the larger div. The origin of the div is in the middle so the size increases the same on top and bottom. This way the div will be partially hidden by the footer.

How can i compensate for the increased scale in the y-axis?

I have created a fiddle as an example. Resize the height of the window and look at the result. Want I want to do is to make the bottom of the scaled div to be just in line with the top of the footer. Any suggestions?

http://jsfiddle.net/pdjrz/30/

The Javascript

function init()
{
    scalediv = document.getElementById("scalediv");
    footer = document.getElementById("footer");
    window.addEventListener("resize", onRezise, false);
}

var onRezise = function()
{
    scale = (window.innerHeight - 33) / 251;
    w = window.innerWidth;
    h = window.innerHeight;

    footer.style.width = w+'px';
    footer.style.top = (h-33)+'px';

    scalediv.style['MozTransform'] = 'scale('+scale+','+scale+')';

    scalediv.style.top = ((h-33)-(400))+ 'px';
}

Answer 1

If you want the footer to be below the scalediv, put it inside the scalediv and position it bottom of scalediv. And make a padding-bottom on scalediv with footer's height.

http://jsfiddle.net/pdjrz/32/

#scalediv{padding:0 33px 0 0;}
#footer{bottom:0;}
<div id="scalediv">
    <div id="footer"></div>
</div>