Vertical content positioning after div conversion

Question

I have content in a div that I am trying to scale according to user preferences. I am using Louis Remi transform.js to do this.

However, when I do this, it is either:

• Pushes the content at the top of the top of the div (turning off the content on a scale)

• Pushes content too far down the container (leaving a lot of free space on the scale)

I tried to call this fragment in the DOM ready

$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' });

but it only works at certain heights. I was wondering if there is anyway that I can push the content to the top of the div, even if my container changes height.

Here is a jsfiddle example . Now it is on a scale of 0.50, which shows that the content is in the middle of the screen, leaving a lot of space on top and bottom of the div.

Here is a detailed image of what I'm trying to achieve.

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

I believe what you are looking for transform-origin

http://css-tricks.com/almanac/properties/t/transform-origin/

This will allow you to set a point in the element that will remain included as a result of the transformations. By setting transform-originto the top center: you can scale the element and keep its position relative to the vertex in the same place.

Answer 2

! transform.js, , , "transform-origin". , #zoomMe , - 25% .

CSS

#zoomMe {
 transform-origin:center top;
 -webkit-transform-origin:center top;
}