Getting the height of a div after setting it to auto in IE

I'm writing some JavaScript that changes the size of some content. To do this I need to know the size of a div wit开发者_如何学Pythonhin my content. If I have the following html:

<div id="wrapper">
   ... other stuff ...
   <div id="inner" style="height:400px">Some text in here</div>
   ... other stuff ...
</div>

And the following JavaScript:

$('#inner').height('auto');
var height = $("#wrapper").height();

In FireFox and Chrome the height variable increases as the inner div expands to fit all the text. In IE this stays the same. I guess it doesn't redraw the div straight away. Anybody know how to get the new correct height in IE?

Cheers

It the problem is that the element doesn't redraw right away, then you need to measure the height asynchronously - set a 0-millisecond timeout to measure it and continue execution.

Try it this way:

$(function() {
  $('#inner').height('auto');
  var height = $("#wrapper").height();
});

Wrapping it in $(function() { }); makes it wait for the DOM to render before running the script. It's probably a good idea to put anything that needs access to the DOM immediately after render inside that function.