title: height space is not being preserved between partial view changes
body: <p>I have a mvc asp.net c# app.</p>
  
  <p>I have a page and a user can click a button.
  the button click event calls my jquery function which returns a partial view using the div.Load method.
  I fadein the second view.</p>
  
  <p>I also have a permanent footer defined in my _layout file.</p>
  
  <p>I have noticed that when the user clicks the button 
  the 1st page disappears
  the 2nd page fades nicely in
  But, between the 1st page dispapearing and the 2nd page starting to fade in my footer jumps up to fill the gap.</p>
  
  <p>I have tried setting the min-height on the container div but still the footer momentarily jumps up.</p>
  
  <p>How should I manage this?</p>
  
  <p>the important part of my _layout page:</p>
  
  <pre><code>   &lt;div class="container body-content" style="min-width:1000px; max-width:1000px;min-height:423px;"&gt;&amp;nbsp;
          &lt;div id="mainContent" style="height:423px; "&gt;
              @RenderBody()           
          &lt;/div&gt;
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;div id="divFooter" style="font-family:DIN; font-size:14px;float:right;margin-right:50px;margin-top:50px; "&gt;
                  &lt;img src="images/facebook.png" /&gt;
                  &lt;img src="images/linked.png" /&gt;
                  &lt;img src="images/twitter.png" /&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>the jquery script to handle the transition:</p>
  
  <pre><code>$("#divProductsBanner").click(function () {
      var url = '/Products';
        $('#mainContent').css('display', 'none');
      $('#mainContent').load(url, function () { $('#mainContent').fadeIn(1000); $('#divFooter').css('display', ''); })
      return false;
  });
  </code></pre>