绝对 div 元素的 Javascript 和 CSS 比例

Question

在使用变换比例时，我对绝对 div 相对于另一个绝对 div 的定位有一些问题。

首先，我有一个位于屏幕底部的页脚 (window.innerHeight - footer_height)，然后我在页脚上方有另一个更大的 div，我想将其放置在页脚的边缘。 ((window.innerHeight - footer_height)-largediv_height)

在我尝试设置较大 div 的转换比例之前，这一切正常。 div 的原点在中间，因此大小在顶部和底部增加相同。这样，div 将被页 footer 分隐藏。

如何补偿 y 轴上增加的比例？

我创建了一个 fiddle 作为例子。调整窗口的高度并查看结果。我想要做的是使缩放后的 div 的底部与页脚的顶部对齐。有什么建议吗？

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

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

如果您希望页脚位于 scalediv 下方，请将其放在 scalediv 内并将其放在 scalediv 的底部。并在带有页脚高度的 scalediv 上制作填充底部。

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

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