使用变换比例时,我在定位绝对 div 相对于另一个绝对 div 时遇到了一些问题。
首先,我有一个位于屏幕底部的页脚(window.innerHeight - footer_height),然后我在页脚上方有另一个更大的 div,我想将其定位在页脚的边缘。((window.innerHeight - footer_height)-largediv_height)
这工作正常,直到我尝试设置较大 div 的变换比例。div 的原点在中间,因此顶部和底部的大小增加相同。这样 div 将被页脚部分隐藏。
如何补偿 y 轴上增加的比例?
我创建了一个小提琴作为示例。调整窗口的高度并查看结果。我想做的是使缩放的 div 的底部与页脚的顶部保持一致。有什么建议么?
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';
}