Question

我在div中有内容，我想根据用户的偏好进行扩展。我正在使用Louis Remi's transform.js来执行此操作。

然而，当我这样做的时候，它会将内容推到div顶部之上（切掉内容）或远离容器（在缩小时留下大量空白区域）。

我想知道无论如何我都可以推送内容以便将它自己添加到div的顶部？

这是jsfiddle example。现在它处于.50比例，显示内容位于屏幕中间，在div的顶部和底部留下了大量空间。

HTML

<div id="reportContainer">
    <div id="zoomMe">
        <div id="content1" class="fillerBox">&nbsp;</div>
        <div id="content2" class="fillerBox">&nbsp;</div>
        <div id="content3" class="fillerBox">&nbsp;</div>
        <div id="content4" class="fillerBox">&nbsp;</div>
        <div id="content5" class="fillerBox">&nbsp;</div>
    </div>
</div>

CSS

#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }

JS

$(document).ready(function() {
    $("#reportContainer").height($(window).height()-50);
    $("#zoomMe").css('transform', 'scale(.50)' );
});

Answer 1

我的其他一个问题上的一个好人实际上回答了这个问题，但是由于有人向我投了我的问题，我想我也会把它放在这里。

有一个很好的CSS选项可以附加转换后的元素。这是我最后做的事，感谢stackoverflow'r的帮助。

-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;

div转换后定位内容

1 个答案: