jquery slider... how to auto height?

http://jsfiddle.net/VDz4J/5/

I have a content slider... check the fiddle for the test case..

what I'd like to achive is that when I slide to a (whatever) .page_content the webpage would need to adjust the height to the current column (panel or whatever)....now, obviously it adjusts to the highest panel...

and please assume, that the content is loaded dynamically, so I do the slide first, then load the content inside... (not vice-versa... for status indication purpose开发者_如何学Pythons)....so I don't know the panel heights in advance like in this test case...

I don't want to delete content from already loaded (but hidden) panels just to get the proper height!

any ideas? can it be done just in CSS, do I need to change my markup? Please, I am desperate!

I'm not great (or even good) at javascript and animations but here's a solution.

Just animate the container div's height to equal the height of the content div that's being displayed.

http://jsfiddle.net/VDz4J/15/

You could try this out : For .page_content set height:auto; (and remove the fixed height for the columns).

Then when you click on a menu link adjust the height :

$("#webpage").css("height",$(".pg_"+$pg).height());

here are the changes : http://jsfiddle.net/VDz4J/14/

Also supposing you would use a function such as load (To load the content dynamically), you could take benefit of it's callback :

$('.pg_'+$pg).load('content_url.php', function() {
   $("#webpage").css("height",$(this).height());
});