Question

i’m trying to force a div to have a certain height depending on his content and change it only when the new content is loaded.

Let’s say i’ve:

<div id="wrapper" style="width: 90%; margin: 0 auto;">
 <div id="collapse_saving_div" style="min-height: 100%;">
  <div id="my_content" style="width: 100%;">
    Content
    Content
    Content
  </div>
 </div>
  <div id="my_bottom_content" style="clear: both;">
  </div>
</div>

I’m going to dynamically load content into #my_content with a script that:

Hides #my_content

Shows a loader.gif

content gets retrieved

Hides the gif

Fades in #my_content

The thing is that obviously whenever #my_content gets hidden #my_content_bottom comes up and then goes down immediately after the new content is faded in without any kind of animation and all this “div jumping” looks bad.

It would roughly solve the problem if i could make the wrapper div not collapse.

In order to do that i tried making #collapse_saving_div and giving it a min-height of 100%, i thought doing that would fix his height at #my_content’s till something bigger or smaller gets loaded.
But it doesn’t work.

Any suggestions? Thanks

edit:
Solved it with js by using

var content_height = $('#main_content').height();
        $('#main_content').hide();
        $('.loader').height(content_height);
        $('.loader').show();

Answer 1

Before removing the content of the div, add this: (raw JS because I don’t do jQuery)

elem.style.height = elem.offsetHeight+"px";

Then, after the content is loaded, when you want the new height to take effect:

elem.style.height = "auto";