絕對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上使用footer的高度填充底部。

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

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