2

トランスフォーム スケールを使用する場合、別の絶対 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';
}
4

1 に答える 1

0

フッターを scalediv の下に配置する場合は、scalediv の内側に配置し、scalediv の下に配置します。そして、フッターの高さで scalediv に padding-bottom を作成します。

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

#scalediv{padding:0 33px 0 0;}
#footer{bottom:0;}
<div id="scalediv">
    <div id="footer"></div>
</div>
于 2012-11-28T18:28:14.840 に答える