title: positioning content after div transform
body: <p>I have content in a div that I am trying to scale according to a user's preferences. I am using <a href="https://github.com/louisremi/jquery.transform.js" rel="nofollow">Louis Remi's transform.js</a> to do this.</p>
  
  <p>However, when I do, it pushes the content either way above the top of the div (cutting off content on scale in) or way far down the container (leaving a lot of white space on scale out).</p>
  
  <p>I was wondering if there was anyway that I can push content so that it would affix itself to the top of the div?</p>
  
  <p>Here is a <a href="http://jsfiddle.net/7VTrL/1/" rel="nofollow">jsfiddle example</a>. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="reportContainer"&gt;
      &lt;div id="zoomMe"&gt;
          &lt;div id="content1" class="fillerBox"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div id="content2" class="fillerBox"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div id="content3" class="fillerBox"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div id="content4" class="fillerBox"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div id="content5" class="fillerBox"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#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; }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
      $("#reportContainer").height($(window).height()-50);
      $("#zoomMe").css('transform', 'scale(.50)' );
  });
  </code></pre>