绝对 div 元素的 Javascript 和 CSS 比例

Question

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

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

这工作正常，直到我尝试设置较大 div 的变换比例。 div 的原点位于中间，因此顶部和底部的大小增加相同。这样 div 将被页脚部分隐藏。

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

我创建了一个小提琴作为示例。调整窗口的高度并查看结果。我想要做的是使缩放的 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>